HTML 3강. CSS

CSS(Cascading Style Sheets) : HTML을 디자인해주는 스타일 언어

지금의 HTML은 문서를 구조화하는 언어이고

세세한 것들 하나하나 조금 더 예쁘게 해주는 언어가 CSS이다.

CSS가 무엇인지 알아보자.

head 태그 안에 title이라고 영어를 치고 엔터만 눌러도

<title></title>이 자동 완성될 것이다.

이것을 code assistance라고 한다.

code assistance : 코드 자동완성

브라우저의 제목은 head에 기입한다.

상단 제목 옆 문서모양 아이콘을 파비콘이라고 한다. 뒤에 다시 언급될 때 자세히 알아보자.

HTML 문법은 <></> 이게 끝이다.

CSS 문법은 조금 다르다.

1. head에 적어야 함

2. <style></style> 태그 사이에 적어야 함

3. 태그이름 { 중괄호 안에 기술하면 됨 }

.클래스명{ } : 태그 이름이 아닌 클래스 이름을 따라갈 때

.클래스명 div{ } : 클래스 아래 자식을 찾아서 적용할 때

4. 문법이다. {속성 : 값;} : 세미콜론(;) 필수

세미콜론이 있어야 컴퓨터가 끝난 문장임을 인식한다.

rgb값뿐만 아니라 색상 코드를 써도 적용이 된다.

이때 세미콜론은 꼭 빠짐없이 붙여주어야 한다.

5. 구체적인 디자인은 class를 준다

class는 ". 클래스 이름"으로 찾아준다.

div태그라고만 한 뒤 배경색을 지정해주니

모든 div태그들에 배경색이 생긴 것을 볼 수 있다.

원하는 태그에만 속성을 부여하기 위해서는 class를 지정해준다.

이때 div태그는 행 전체를 차지하는 빈 박스의 사이즈인 block이라고 했는데

div의 display를 inline으로 변경해주었더니 자기 자신의 크기만큼만 지정된 것을 볼 수 있다.

그렇다면 div태그가 block인 상태에서 사이즈를 지정해주면 어떻게 될까?

아래 사진에선 잘 안 보이지만 첫 번째 박스의 크기가 값을 넣은 대로 보임에도

두 번째 박스라는 텍스트는 아래로 내려갔다.

브라우저의 검사를 통해 확인해보니 사이즈를 지정해주었음에도 불구하고

가진범위는 달라지지 않았다.

inline은 박스의 크기를 지정해줘도

다 무시하고 자신의 크기만큼의 사이즈만 가져간다.

display 속성 중 많이 사용하는 속성이 inline-block이다.

내가 원하는 만큼 박스의 크기를 커스터마이징 할 수 있다.

block과는 다르게 내가 지정해준 만큼 크기를 가지며 범위 또한 같다.

div태그 안에 자식 태그를 만들어서 넣었다.

이때 부모 태그의 class 이름은 outer고 자식 태그는 box2이다.

부모 태그에서 글자 정렬을 가운데 맞춤으로 했더니

자식 태그에 있던 박스가 가운데로 온 것을 볼 수 있다.

텍스트가 가운데로 오라 했는데 왜 박스가 가운데로 갔을까?

box2가 inline이기 때문에 텍스트처럼 인식이 되기 때문이다.

margin: 0 auto

-> 브라우저 크기에 따라 자동으로 정중앙으로 보낼 수 있음

block일 때만 적용되고, inline일 때는 적용 안됨

* 다양한 margin 사용법
margin: 10px;
-> 동서남북 10씩
margin: 5px 10px;
-> 세로(위, 아래) 5 / 가로(왼, 오) 10
margin: 5px 10px 20px 30px
-> 위쪽부터 시계방향으로 12,3,6,9시 방향
margin-top: 5px, margin-bottom 등등..

CSS의 양이 너무 많아지면 HTML 문서의 양도 많아지고 지저분해진다.

이럴 때 CSS의 파일을 따로 만들어준다.

작성방식은 똑같고 html 파일과 css 파일을 연결시켜주기만 하면 된다.