[ HTML / CSS 공부] 3. CSS 기본구조

티스토리 뷰

web & develop/HTML & CSS

[ HTML / CSS 공부] 3. CSS 기본구조

Nerd_Lee 2022. 1. 14. 18:51

[ 이전 글 보기 ]

https://includecoding.tistory.com/219

2. HTML 기본 문법 ( HTML에서 자주 사용하는 태그들 )

[ 이전 글 보기 ] https://includecoding.tistory.com/218 1. HTML의 기본 형식 퇴사한 지 1년이 넘은 시점.. 아직 코딩 실력은 줄지 않았겠지 라고 생각하고 C#에서 javascript로 넘어가 javascript/typescript와..

includecoding.tistory.com

css를 공부하기 전 기본 html 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>안녕 난 타이틀이야</title>
  </head>
  <body>
    <h1>청춘예찬</h1>
    <p>
      대중을 위하여서 밥을 주며, 그들에게 힘차게 뭇 예수는 가슴에 운다. 작고 얼마나 만물은 청춘은 이상의 것은 것이다.
      되려니와, 만천하의 뜨거운지라, 이는 생생하며, 그들을 듣는다. 수 두손을 방황하였으며, 무엇을 대중을 불어 이것을
      생명을 동력은 것이다. 많이 용기가 청춘에서만 그것은 기관과 되려니와, 그들은 생의 목숨을 아름다우냐? 일월과 맺어,
      피가 목숨이 끝에 것이다. 끓는 얼음 곳이 위하여서 위하여서. 인생에 온갖 인간에 지혜는 영원히 있는 피부가
      그리하였는가? 이상의 새가 인생을 위하여 있음으로써 그들은 피고 없으면 피다. 끓는 얼마나 그와 싸인 소리다.이것은
      것이다. 인간이 인도하겠다는 것은 얼마나 든 있을 인생에 것이다.
    </p>

    <p>
      청춘의 풀이 실현에 때문이다. 광야에서 얼음에 이 구하기 그들은 대중을 목숨을 때문이다. 보내는 사랑의 살았으며,
      따뜻한 피고, 원질이 황금시대의 눈이 것이다. 우리의 가지에 어디 무엇을 만천하의 운다. 설산에서 군영과 힘차게 가는
      밥을 인생을 곳이 피어나기 할지라도 보라. 옷을 거선의 발휘하기 광야에서 피는 심장은 속에서 온갖 것이다. 대한 작고
      인생을 품고 풍부하게 찾아 이상은 교향악이다. 싸인 그들은 만천하의 풀이 붙잡아 청춘은 이성은 새 우리 피다. 이상은
      곧 튼튼하며, 많이 그들에게 평화스러운 청춘의 지혜는 이것이다. 착목한는 꽃이 천고에 무엇을 원질이 끓는다. 예가
      그들은 힘차게 바로 이상을 피가 인생을 끓는 너의 아름다우냐?
    </p>

    <p>
      싹이 그러므로 피가 원질이 우리는 모래뿐일 뿐이다. 부패를 많이 수 그와 것이다. 그들의 굳세게 위하여 이것을 그들을
      말이다. 장식하는 곧 온갖 실현에 위하여서, 물방아 석가는 반짝이는 타오르고 황금시대다. 열락의 천지는 가치를 얼마나
      때에, 뜨거운지라, 위하여 간에 바로 아니다. 되는 돋고, 못할 봄날의 피고, 이것이다. 대고, 이것은 심장의 품에
      되려니와, 것은 놀이 것이다. 실현에 이상 인간의 사는가 가치를 놀이 쓸쓸하랴? 따뜻한 봄날의 위하여 하는 오아이스도
      품고 두손을 트고, 할지라도 뿐이다. 뜨고, 우리 같은 아름다우냐?
    </p>
    <a href="http://www.davincimap.co.kr/davBase/Source/davSource.jsp?Job=Body&SourID=SOUR001850">청춘예찬 본문읽기</a>
  </body>
</html>

1. CSS란?

- Cascading Style Sheets의 약자로, HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어라고 한다.

CSS는, HTML의 요소 하나하나를 어떻게 렌더링되어야 하는지를 지정할 수 있고

Cascading - Cascade란, 종속을 뜻하는데, 서로 다른 원점에서 가져온 속성 여럿을 조합해서 최종 결과를 도출하는 알고리즘을 뜻한다고, MDN Web Docs에 표시되어 있다.

참고 : https://developer.mozilla.org/ko/docs/Web/CSS/Cascade

종속 - CSS: Cascading Style Sheets | MDN

종속(Cascade)이란 서로 다른 원점에서 가져온 속성 여럿을 조합해 최종 결과를 도출하는 알고리즘입니다. Cascading Style Sheets라는 이름에서도 알 수 있듯 종속은 CSS의 중심입니다. 이 글은 종속이

developer.mozilla.org

2. CSS의 기본 구조는 어떻게 구성되는가.

selector { property : value; }

예를 들어, <div class="class"></div> 이렇게 정해진 html의 div 태그가 있다면?

.class {
 margin : 0 auto;
}

뭐 이런식으로 css를 사용할 수 있다.

3. html에서 css 사용하기

3-1. <style></style> 안에, 값을 넣어 사용한다.

 <body>
    <style>
      h1 {
        color: green;
      }
    </style>

    <h1>청춘예찬</h1>
    <p>
      대중을 위하여서 밥을 주며, 그들에게 힘차게 뭇 예수는 가슴에 운다. 작고 얼마나 만물은 청춘은 이상의 것은 것이다.
      되려니와, 만천하의 뜨거운지라, 이는 생생하며, 그들을 듣는다. 수 두손을 방황하였으며, 무엇을 대중을 불어 이것을
      생명을 동력은 것이다. 많이 용기가 청춘에서만 그것은 기관과 되려니와, 그들은 생의 목숨을 아름다우냐? 일월과 맺어,
      피가 목숨이 끝에 것이다. 끓는 얼음 곳이 위하여서 위하여서. 인생에 온갖 인간에 지혜는 영원히 있는 피부가
      그리하였는가? 이상의 새가 인생을 위하여 있음으로써 그들은 피고 없으면 피다. 끓는 얼마나 그와 싸인 소리다.이것은
      것이다. 인간이 인도하겠다는 것은 얼마나 든 있을 인생에 것이다.
    </p>

    <p>
      청춘의 풀이 실현에 때문이다. 광야에서 얼음에 이 구하기 그들은 대중을 목숨을 때문이다. 보내는 사랑의 살았으며,
      따뜻한 피고, 원질이 황금시대의 눈이 것이다. 우리의 가지에 어디 무엇을 만천하의 운다. 설산에서 군영과 힘차게 가는
      밥을 인생을 곳이 피어나기 할지라도 보라. 옷을 거선의 발휘하기 광야에서 피는 심장은 속에서 온갖 것이다. 대한 작고
      인생을 품고 풍부하게 찾아 이상은 교향악이다. 싸인 그들은 만천하의 풀이 붙잡아 청춘은 이성은 새 우리 피다. 이상은
      곧 튼튼하며, 많이 그들에게 평화스러운 청춘의 지혜는 이것이다. 착목한는 꽃이 천고에 무엇을 원질이 끓는다. 예가
      그들은 힘차게 바로 이상을 피가 인생을 끓는 너의 아름다우냐?
    </p>

    <p>
      싹이 그러므로 피가 원질이 우리는 모래뿐일 뿐이다. 부패를 많이 수 그와 것이다. 그들의 굳세게 위하여 이것을 그들을
      말이다. 장식하는 곧 온갖 실현에 위하여서, 물방아 석가는 반짝이는 타오르고 황금시대다. 열락의 천지는 가치를 얼마나
      때에, 뜨거운지라, 위하여 간에 바로 아니다. 되는 돋고, 못할 봄날의 피고, 이것이다. 대고, 이것은 심장의 품에
      되려니와, 것은 놀이 것이다. 실현에 이상 인간의 사는가 가치를 놀이 쓸쓸하랴? 따뜻한 봄날의 위하여 하는 오아이스도
      품고 두손을 트고, 할지라도 뿐이다. 뜨고, 우리 같은 아름다우냐?
    </p>
    <a href="http://www.davincimap.co.kr/davBase/Source/davSource.jsp?Job=Body&SourID=SOUR001850">청춘예찬 본문읽기</a>
  </body>

color : green;은 말 그래도, 글의 색상을 초록색으로 변경해준 것이다.

이렇게, 원래 검은색이 default였던 색을 초록색으로 변경했다.

3-2. style을 변경 할 태그 안에 직접 넣어주기

<body>
    <h1 style="color:green">청춘예찬</h1>
    <p>
      대중을 위하여서 밥을 주며, 그들에게 힘차게 뭇 예수는 가슴에 운다. 작고 얼마나 만물은 청춘은 이상의 것은 것이다.
      되려니와, 만천하의 뜨거운지라, 이는 생생하며, 그들을 듣는다. 수 두손을 방황하였으며, 무엇을 대중을 불어 이것을
      생명을 동력은 것이다. 많이 용기가 청춘에서만 그것은 기관과 되려니와, 그들은 생의 목숨을 아름다우냐? 일월과 맺어,
      피가 목숨이 끝에 것이다. 끓는 얼음 곳이 위하여서 위하여서. 인생에 온갖 인간에 지혜는 영원히 있는 피부가
      그리하였는가? 이상의 새가 인생을 위하여 있음으로써 그들은 피고 없으면 피다. 끓는 얼마나 그와 싸인 소리다.이것은
      것이다. 인간이 인도하겠다는 것은 얼마나 든 있을 인생에 것이다.
    </p>

    <p>
      청춘의 풀이 실현에 때문이다. 광야에서 얼음에 이 구하기 그들은 대중을 목숨을 때문이다. 보내는 사랑의 살았으며,
      따뜻한 피고, 원질이 황금시대의 눈이 것이다. 우리의 가지에 어디 무엇을 만천하의 운다. 설산에서 군영과 힘차게 가는
      밥을 인생을 곳이 피어나기 할지라도 보라. 옷을 거선의 발휘하기 광야에서 피는 심장은 속에서 온갖 것이다. 대한 작고
      인생을 품고 풍부하게 찾아 이상은 교향악이다. 싸인 그들은 만천하의 풀이 붙잡아 청춘은 이성은 새 우리 피다. 이상은
      곧 튼튼하며, 많이 그들에게 평화스러운 청춘의 지혜는 이것이다. 착목한는 꽃이 천고에 무엇을 원질이 끓는다. 예가
      그들은 힘차게 바로 이상을 피가 인생을 끓는 너의 아름다우냐?
    </p>

    <p>
      싹이 그러므로 피가 원질이 우리는 모래뿐일 뿐이다. 부패를 많이 수 그와 것이다. 그들의 굳세게 위하여 이것을 그들을
      말이다. 장식하는 곧 온갖 실현에 위하여서, 물방아 석가는 반짝이는 타오르고 황금시대다. 열락의 천지는 가치를 얼마나
      때에, 뜨거운지라, 위하여 간에 바로 아니다. 되는 돋고, 못할 봄날의 피고, 이것이다. 대고, 이것은 심장의 품에
      되려니와, 것은 놀이 것이다. 실현에 이상 인간의 사는가 가치를 놀이 쓸쓸하랴? 따뜻한 봄날의 위하여 하는 오아이스도
      품고 두손을 트고, 할지라도 뿐이다. 뜨고, 우리 같은 아름다우냐?
    </p>
    <a href="http://www.davincimap.co.kr/davBase/Source/davSource.jsp?Job=Body&SourID=SOUR001850">청춘예찬 본문읽기</a>
  </body>

3-1에서의 코드와 현재 코드의 다른점은, <style> 태그 안에 변경할 태그를 selector로 지정한 것과 다르게

<h1> 태그 안에, style이란 속성을 이용할 수도 있다라는 것을 보여준다. 하지만 이 두개의 방법은 전혀 좋은 방법은 아니다.

간단한 웹페이지라 할지라도, 코드가 몇 백줄이 될 지 몇 천줄이 될지는 모르기 때문이다.

3-3. css 파일을 만들어서, html에 연결하기

1 - 일단, index.css 파일이란 새로운 파일을 만든다.

2 - <head> 태그 안에, <link> 태그를 추가한다. 이렇게 말이다.

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>안녕 난 타이틀이야</title>
    <link rel="stylesheet" type="text/css" href="index.css" /> <- 이 부분
  </head>

link의 속성에서

rel은, relationship의 약자이며, 해당 속성에서 stylesheet라는 값은 스타일시트로 사용할 외부 리소스를 불러온다라는 뜻이다.

[link의 rel 속성이 궁금하시다면, 밑에 링크를 클릭하세요.]

http://tcpschool.com/html-tag-attrs/link-rel

type 속성은, 링크된 외부 리소스의 미디어 타입을 명시하는 속성이다.

그리고, href 속성이 설정이 되어야지만, type 속성을 사용할 수 있다.

href 속성은, 해당 리소스의 링크를 뜻하며, 프로그램 폴더안에 있는 index.css 파일을 불러오는 것과 같다.

3 - index.css 파일에 값을 넣어주기

h1 {
  color: green;
}

4. Selector의 종류

4-1. TYPE 선택자는, 저 위에서의 코드와 같이, h1의 태그를 한 번에 바꿀 수가 있다.

사용 방법은, h1 {} 과 button {} 이런 형식으로 사용하는 것을 TYPE 선택자라고 한다.

4-2. ATTRIBUTE 선택자는, a[href="https://google.com"]{} 이런 식인데, 몰라도 된다. 쓸 일이 없다고 본다.

4-3. id 선택자는 #(태그에 사용된 id) {} 를 뜻하는데, id는, 해당 태그의 주민등록번호와 같다.

4-4. class 선택자는 .(태그에 사용된 클래스 이름){} 을 뜻하는데, id와 class는 무엇이 다르냐?!

선택자 앞에, #을 붙이는 것이 id .(dot)을 붙인다면, class라고 보면 된다.

예를 들어, id와 class가 헷갈린다면

id를 가지고 있는 태그는 하나다. 그래서 id선택자는 주민등록번호라고 얘기를 한 것이고

class 선택자는, 성별이라고 생각하면 될 것 같다. 남녀를 구분지을 수 있기 때문에

<div class="남자">
<div id="100101-35xxxxx"></div>
<div id="900101-15xxxxx"></div>
</div>
<div class="여자">
<div id="100101-45xxxxx"></div>
<div id="560101-25xxxxx"></div>
</div>

class는, 남자 여자처럼, 구분을 지어서 사용해서 할 수 있고

만약에 여자 클래스에 대한 코드 밑에 다시 남자에 대한 데이터를 추가해야 된다면? 그럼 <div class="남자> 라는 태그를 넣어서 재사용을 할 수도 있다.

하지만, id는 주민등록번호와 같다고 했다. id는 태그에 하나만 사용이 가능하기 때문에

id에 맞는 태그에 bold 처리를 할 지 안 할지, 아니면 폰트 사이즈를 늘릴 지 안늘릴지는 개발자가 어떻게 하느냐에 따라 다르고

id에 맞는 태그의 style만 바꿀 수 있다고 보면 된다.

class와 id는 비슷해보이지만, 한 번 만들어서, 재사용을 할 수 있느냐 없느냐로 구분할 수 있다고 본다.

4-5. 그룹 선택자

h1, p {} 처럼, <h1>태그와 <p> 태그를 전부 묶어서 속성을 한 번에 변경할 수가 있다.

4-6. 가상 선택자

가상 선택자는 여러개가 있다.

가상 선택자가 알고 싶다면, 밑에 링크를 클릭해서 읽어보도록 하자.

https://ofcourse.kr/css-course/%EA%B0%80%EC%9E%A5-%ED%81%B4%EB%9E%98%EC%8A%A4-%EC%84%A0%ED%83%9D%EC%9E%90

CSS 가상 클래스 선택자 - ofcourse

개요 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 합니다. :link - 방문한 적이 없는 링크 :visited - 방문한 적이 있는 링크 :h

ofcourse.kr

예시로, 만약에 내가 <p>태그를 마우스로 가져다대고 있으면, 배경을 회색으로 바뀌게 하고 싶다면?

[index.css]

p:hover{
background-color: gray;
}

hover라는 가상이벤트를 사용하면, 가능한데, 기본코드에 있는 <p> 태그는 총 3개이다.

그렇기 때문에, 문단에 따라 색깔이 회색으로 변경되었다가, hover 이벤트가 끝나면 원래 상태로 되돌아 올 것이다.

밑에 캡쳐된 사진처럼 말이다.

5. div와 span 태그에 대해서

- div와 span은, block과 inline 이라는 차이점이 있다.

block은, 글자가 하나밖에 없더라도, 가로영역이, width: 100%라는 점. 기본으로 지정된 margin과 padding을 제외한다면 말이다.

하지만 inline은, 글자가 한 글자라면, 한 글자에 대한 영역만을 가지게 된다는 점이다.

그리고 block인 경우에는, margin이 먹히지만, inline은 margin을 사용할 수 없다는 점도 다른 점이다.

6. 자주 쓰는 CSS 속성

6-1. border

border: 1px solid black;

- 1px이란 크기의 검은색으로 기본 줄을 영역안에 그어주게 된다.

물론 전체 영역이 아닌 위 또는 아래, 왼쪽, 오른쪽만 줄을 그어주고 싶다면?

border-bottom, border-top, border-left, border-right의 속성을 사용할 수 있다.

6-2. border-radius

border-radius : 30px;

- border-radius는, 해당 태그의 영역을 둥그렇게 만들기 위해 필요한 속성이다. radius는 반지름을 뜻하기 때문에

영역을 원처럼 만들기 위해서는 border-radius 속성이 쓰이게 된다.

속성을 전부 한 번에 배울수는 없다. 그렇기 때문에 링크를 타고, 해당 속성을 공부해보는 것을 추천한다.

[ CSS 속성 공부 링크 ]

https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN

사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. 사용자 지정 속성은 전용 표기법을 사용해 정의하고, (--main-color: black;)

developer.mozilla.org

나중에 시간이 되면, css 속성에 대한 것들을 한 번에 정리해서 올려보도록 하겠습니다.

도움이 되셨기를 바라며, 다음은 flex와 grid에 대한 공부내용을 가지고 돌아오겠습니다. 👋👋👋👋👋👋

저작자표시 비영리 변경금지

'web & develop > HTML & CSS' 카테고리의 다른 글

[ CSS ] background-color를 투명색으로 만들어보자 (0)	2022.01.26
[ HTML / CSS 공부 ] 5. Grid란? (0)	2022.01.14
[ HTML / CSS 공부 ] 4. Flexbox란? (0)	2022.01.14
[ HTML / CSS 공부] 2. HTML 기본 문법 ( HTML에서 자주 사용하는 태그들 ) (0)	2022.01.12
[ HTML / CSS 공부] 1. HTML의 기본 형식 (0)	2022.01.12

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

글 보관함

웹 개발의 기록들

티스토리 뷰

[ HTML / CSS 공부] 3. CSS 기본구조

'web & develop > HTML & CSS' 카테고리의 다른 글

티스토리툴바