안녕하세요.
이도해 개발자님의 'HTML5 독학백서'라는 책을 통해 웹개발 공부에 입문하기 시작했습니다.
도서명 : CSS3 독학백서
저자 : 이도해
출판 : 티더블유아이지 (2021.03.24)
Youtube 강의 : https://youtu.be/zgxQrDKqPys
책에 나온 정보들을 기반으로 공부한 내용들을 정리하기 위한 목적으로 작성한 글이니 참고하시기 바랍니다.
HTML에 CSS로 스타일을 적용하는 방법에는 3가지가 있습니다.
1. 인라인(Inline) : HTML 태그 내부에 style 속성을 사용해서 요소들에 직접 스타일을 지정하는 방법
- 아주 짧은 예제를 작성할 때는 괜찮으나 요소와 작성된 스타일이 많아질수록 가독성과 유지보수에 단점이 있습니다.
2. 인터널(Internal) : style 태그 내부에 스타일시트를 작성하는 방법
- 하나의 HTML 문서가 양이 많지 않은 고유한 스타일을 가질 때 사용하나 요소와 작성할 스타일이 많아지면 가독성과 유지보수에 단점이 있습니다.
3. 익스터널(External) : css 확장자를 가진 별도의 파일에 스타일을 작성하고 HTML에는 링크로 연결만 해주는 방법
- 구조와 디자인을 각각 분리해서 작성하고 관리할 수 있고 여러 개의 HTML 파일에 동일한 CSS 파일을 적용하거나 HTML 파일에 한 번에 여러 개의 CSS 파일을 적용할 때에도 링크만 추가해주면 되어 가장 적합한 방식입니다.
주석
CSS에서 주석을 달 때는 /* */의 구조를 사용합니다.
기본 문법 구조
CSS의 문법 구조는 선택자와 선언부로 구성됩니다. 이 때 선언부의 시작과 끝은 중괄호로 감싸져야 하고, 속성명과 속성값으로 구성됩니다. 각각의 선언 끝에는 세미콜론 기호를 붙여 구분합니다.
위 사진을 예로 들면 h1이 선택자이고 중괄호부터는 선언부가 됩니다.
선택자
선택자는 스타일을 적용할 대상을 선택하기 위한 식별자로 사용되는데요. 선택자의 종류로 전체 선택자, 태그 요소 선택자, 아이디 선택자, 클래스 선택자 총 네 가지로 구분할 수 있습니다.
1. 전체 선택자 : HTML 문서 내에 모든 요소를 의미하고, 별표(*) 기호를 식별자로 사용합니다.
2. 태그 요소 선택자 : HTML 문서 내 특정 태그를 선택할 때 사용되고, 태그 이름을 식별자로 사용합니다.
3. 아이디 선택자 : 해당 아이디를 사용하는 요소를 선택하고 HTML 요소의 아이디 속성으로 지정된 문자 앞에 샵(#) 기호를 붙여서 사용합니다.
4. 클래스 선택자 : 해당 클래스를 사용하는 요소를 선택하며 HTML 요소에 클래스 속성으로 지정된 문자 앞에 점(.) 기호를 붙여서 사용합니다.
추가로 여러 개의 선택자에 동일한 스타일을 지정할 수도 있습니다.
결합 선택자
HTML 문서 내 계층 관계에 따른 조상이나 자손 또는 부모나 자식 요소를 선택하기 위한 결합 선택자 사용법에 대해 이야기 해보겠습니다.
위 코드를 보면 first라는 클래스를 가진 요소가 h1 태그와 div 태그 2개의 자식 요소를 갖고 있고, first 요소의 자식인 second 요소는 2개의 h1 태그 자식 요소를 가지고 있습니다. 이 때 first라는 조상 요소 하위에 있는 모든 h1 태그 자손 요소들을 선택하기 위해서는 조상 요소와 자손 요소의 선택자를 띄어쓰기로 구분해 사용합니다.
first라는 클래스를 가진 요소의 자손들 중에 h1 태그를 사용하는 요소들을 모두 선택하게 됩니다.
부모 요소 하위에 있는 자식 요소만을 선택하기 위해서는 부모와 자식 선택자를 오른쪽 꺾쇠(>)기호로 구분해 사용합니다.
이렇게 하면 first라는 클래스를 가진 요소의 자식 요소인 h1 태그만을 선택하게 됩니다.
텍스트와 폰트 스타일
CSS에서 텍스트에 적용할 수 있는 대표적인 속성에는 컬러, 정렬, 줄간격, 영어 대소문자 설정이나 데코레이션 효과 설정 등이 있습니다.
CSS에서 폰트에 적용할 수 있는 대표적인 속성은 폰트 종류, 사이즈, 굵기, 기울임 효과 등이 있습니다.
font-family 속성에는 사용하려는 폰트 집합과 제네릭 집합을 지정해 줍니다. 이 제네릭 집합은 고딕체라든지 명조체처럼 어떤 비슷한 모양을 가진 폰트의 집합을 의미합니다.
여기 serif라고 적힌 것은 명조체를 의미합니다. 이 부분을 sans-serif라고 바꾼다면 고딕체 폰트를 의미하게 됩니다. font-family는 사용하려는 폰트 집합을 나열하고 마지막에 serif, sans-serif처럼 제네릭 집합을 명시해 주면 브라우저에서 폰트 집합을 사용자가 갖고 있지 않은 경우에 가장 비슷한 폰트를 보여주게 됩니다.
문서에 웹 폰트를 적용하는 방법에 대해 이야기해 보겠습니다. 웹 폰트를 적용하는 방법에는 HTML 문서에 링크 태그로 가져오는 방식, CSS에 @import하는 방식 등이 있습니다. HTML 문서에 링크 태그로 가져오는 방식은 웹 폰트 배포자가 제공하는 링크 태그 코드를 복사해서 head 태그 내에 넣어주면 됩니다.
이렇게 하면 웹 폰트를 가져오는 것은 끝났고, 이제 CSS에서 이 가져온 폰트 집합을 적용만 해주면 됩니다.
@import하는 방식은 url()이라는 함수를 사용해서 웹 폰트를 가져오고, 스타일 시트를 작성하는 곳에 추가되어야 합니다.
링크와 리스트 스타일
a 태그를 사용해 표현하는 링크에 지정할 수 있는 대표적인 스타일 속성은 colo와 background-color, 텍스트와 폰트 속성들이나 여백, display 속성 등이 있습니다. 링크의 스타일을 지정할 때는 링크의 상태에 따라 각각 다른 스타일을 지정할 수도 있습니다. link는 기본 상태를 hover는 마우스 오버 상태를 active는 마우스 클릭 상태를 나타내고 visited는 방문했던 링크를 focus는 포커스를 가진 상태를 나타냅니다. 이렇게 특정 상태의 스타일을 지정할 때는 선택자와 상태를 콜론(:)으로 연결하면 됩니다.
CSS에 리스트에 적용할 수 있는 대표적인 속성은 list-style-type, list-style-image, list-style-position 등이 있습니다.
가상 선택자
가상 선택자란 HTML 웹 문서에 실제로 존재하지는 않지만 필요에 의해서 임의로 지정해서 사용하는 선택자를 의미합니다. a 태그에 상태를 선택하는 식별자인 :link라든지 :hover, :focus같은 것들이 가상 선택자에 해당됩니다.
구조적인 가상 선택자는 어떤 요소가 몇번째에 있는지에 따라 다른 스타일을 지정하기 위해 사용합니다.
nth-child 속성값에 숫자를 몇번째 요소인지 직접 숫자를 기입해도 되고, even(짝수)이나 odd(홀수)를 사용할 수 있습니다.
백그라운드 스타일
배경에 적용할 수 있는 대표적인 속성에는 color, image, repeat, size 등이 있습니다.
background-image: url을 통해 사진을 배경으로 사용할 수 있습니다.
background-size:를 통해 배경의 크기를 조절할 수 있습니다. cover로 지정하면 요소의 전체 영역을 덮도록 조절되고, contain으로 지정하면 배경을 사용하는 요소를 벗어나지 않는 선에서 최대한 크게 조절됩니다.
background-repeat:를 통해 배경의 반복을 설정할 수 있습니다. 가로로만 반복한다든지 세로로만 반복한다든지 등
여백과 테두리 스타일
여백은 내부 여백과 외부 여백으로 나눌 수 있습니다. 내부 여백을 지정하는 속성은 padding, 외부 여백을 지정하는 속성은 margin이라고 합니다.
대표적인 테두리 스타일 속성으로는 border, border-radius 정도가 있습니다. border는 전체적인 테두리 스타일, 컬러, 사이즈를 한 번에 지정하는 단축 속성입니다.
지정할 수 있는 테두리 스타일의 종류로는 실선, 이중 실선, 점선, 긴 점선 등이 있습니다. 여백과 마찬가지로 하이픈과 방향 키워드를 붙여 특정 방향의 테두리만 지정할 수도 있습니다. border-radisu 속성은 테두리의 모서리를 둥글게 만드는 속성으로 픽셀, em, 퍼센트 등의 수치 값을 가집니다.
박스 모델과 box-sizing
HTML에 모든 요소들은 박스 모델로 구성이 됩니다. 이 박스 모델을 어떤 요소가 이루는 영역을 내용 영역(content)과 내부 여백(padding) 그리고 테두리(border)와 외부 여백(margin)으로 구분합니다. 여러 개의 박스 모델을 사용해서 웹 문서를 작성하다 보면 박스 모델의 크기가 예상한 것과 다를 때가 있습니다.
위 사진을 보면 동일한 사이즈의 박스를 3개 만들었습니다. 추가로 2번 박스에는 테두리를 3번 박스에는 내부 여백을 추가해 보겠습니다.
3개의 박스를 같은 사이즈로 지정하고 2번 박스에는 테두리를 3번 박스에는 내부 여백을 추가하니 박스 사이즈들이 달라졌습니다. 이런 문제가 발생하는 이유는 CSS에서 width 속성과 height 속성이 내용 영역에 대한 사이즈만 지정하기 때문입니다. 다시 말해 요소의 전체 사이즈를 내용을 기준으로 계산하기 때문에 내부 여백이나 테두리는 전체 사이즈에 포함되지 않습니다. 이런 문제를 해결하기 위해서는 box-sizing 속성을 border-box로 지정해서 요소 전체 사이즈를 계산할 때 내용을 기준으로 하는 것이 아닌 테두리를 기준으로 하게끔 지정하면 됩니다.
디스플레이와 포지션 속성
HTML 태그는 모두 블록 레벨과 인라인 레벨 크게 두 가지로 나눌 수 있습니다. CSS에서는 이러한 구분을 display 속성이라고 합니다. 디스플레이 속성은 요소가 화면에서 어떻게 표현되는가 어떻게 위치하는가를 지정하는 속성입니다. 디스플레이 속성이 가질 수 있는 값은 none, block, inline, inline-block이 있습니다.
- none : 안보임
- block : 블록 속성
- inline : 인라인 속성
- inline-block : 블록의 특성을 유지하며 인라인 속성. 인라인처럼 줄바꿈없이 표현되지만 블록처럼 사이즈나 여백을 지정할 수 있음
포지션은 요소의 위치를 지정하는 속성입니다. 대표적인 포지션 속성의 종류는 static, fixed, relative, absolute 4가지로 구분할 수 있습니다. 이 포지션 속성을 사용할 때는 구체적인 요소의 위치를 지정하기 위해서 top, left, right, bottom이라는 속성과 함께 사용될 수 있습니다.
- static (정적 위치) : 기본
- fixed (고정 위치) : 뷰포트를 기준으로 위치를 지정되며 fixed로 지정된 요소들은 웹 페이지의 사이즈가 변하거나 스크롤이 생겨도 항상 고정적인 자리에 위치
- relative (상대적 위치) : 요소의 현재 위치를 기준으로 위치를 지정
- absolute (절대 위치) : 조상 요소들 중에 position이 relative로 지정된 가장 가까운 조상 요소를 기준으로 위치를 지정하며 조상 요소가 없다면 body 요소를 기준으로 위치 지정
플렉스 (Flex)
플렉스는 모던 CSS에서 레이아웃을 다루기 위해 사용되는 주요 기능 중 하나이자 레이아웃 배치를 위한 전용 기능입니다.
플렉스 레이아웃은 플렉스를 적용할 컨테이너와 플렉스 관련 속성이 적용돼서 배치될 실제 아이템들로 구성이 됩니다. 플렉스 컨테이너에 display 속성을 flex로 지정해서 사용할 수 있습니다. 플렉스 레이아웃은 메인축과 교차축을 기준으로 아이템을 정렬합니다.
- 메인 축 : 아이템이 배치된 방향의 축
- 교차 축 : 메인 축과 수직을 이루는 축
플렉스 속성은 컨테이너에 적용할 수 있는 컨테이너 속성과 아이템에 적용할 수 있는 아이템 속성으로 구분합니다.
컨테이너 속성
1. flex-direction : 아이템이 배치되는 축의 방향을 지정하는 속성 (가로 배치 : row, 세로 배치 : column), 각각을 거꾸로 배치할 수 있는 row-reverse와 column-reverse도 있습니다.
2. flex-wrap : 아이템의 크기가 컨테이너 전체 크기보다 커질 때 아이템의 줄바꿈을 어떻게 할 것인지 지정하는 속성
3. flex-flow : flex-direction 속성과 flex-wrap 속성을 한 번에 작성할 수 있는 단축 속성
4. justify-content : 메인 축 방향의 아이템 정렬을 지정하는 속성
5. align-items : 교차 축 방향의 아이템 정렬을 지정하는 속성
6. align-content : flex-wrap이 wrap으로 설정되어 있고, 아이템이 2줄 이상 배치되어 있을 때 교차 축의 정렬을 지정
아이템 속성
1. flex-basis : 플렉스 아이템의 기본 크기를 지정하는데 메인 축 방향이 가로일 때는 가로 크기를 세로일 때는 세로 크기를 지정
2. flex-grow : 아이템의 크기가 flex-basis 속성으로 지정된 기본값에서 얼마나 늘어날 수 있는지를 지정하는 속성
3. flex-shrink : flex-grow와 반대로 기본값에서 얼마나 작아질 수 있는지 지정하는 속성
4. flex : flex-grow, flex-shrink, flex-basis 속성을 한 번에 작성할 수 있는 단축 속성
5. align-self : 단일 아이템 자기 자신의 교차축 방향 정렬을 지정하는 속성
6. order : 아이템의 배치 순서를 지정하는 속성
그리드 (Grid)
그리드는 플렉스와 같이 모던 CSS에서 레이아웃을 다루기 위해 사용되는 기능입니다. 플렉스가 가로 또는 세로 단일 방향 레이아웃을 배치하는데 적합하다면 그리드는 마치 표처럼 행과 열로 구성된 레이아웃을 배치하는데 더 적합한 기능이라고 할 수 있습니다. 그리드 레이아웃이 적용될 컨테이너와 그리드에 배치될 아이템들로 구성이 되고 컨테이너에 display 속성을 grid로 지정해서 사용할 수 있습니다. 그리드 속성 역시 플렉스와 마찬가지로 컨테이너에 적용할 수 있는 컨테이너 속성과 아이템에 적용할 수 있는 아이템 속성이 있습니다.
컨테이너 속성
grid-template-rows : 행의 크기를 지정
grid-template-columns : 열의 크기를 지정
auto-fill : repeat() 함수와 함께 사용. 행이나 열의 개수를 미리 지정하지 않고 가능한 공간의 최대한 많은 셀을 배치하기 위해 사용하며, 비어있는 셀을 만들어서 그리드를 채움
auto-fit : repeat() 함수와 함께 사용. 행이나 열의 개수를 미리 지정하지 않고 가능한 공간의 최대한 많은 셀을 배치하기 위해 사용하며, 남은 공간에 셀을 늘려서 채움
column-gap : 열 사이의 간격 지정
row-gap : 행 사이의 간격 지정
gap : 행과 열 사이의 간격을 한 번에 지정
grid-auto-colums : 지정된 열을 벗어나는 셀에 적용할 사이즈 지정
grid-auto-rows : 지정된 행을 벗어나는 셀에 적용할 사이즈 지정
아이템 속성
justify-items : 가로 방향으로 정렬
align-items : 세로 방향으로 정렬
place-items : 가로와 세로 방향을 한 번에 지정
grid-column-start : 지정된 그리드 아이템 열의 시작 위치 지정
grid-column-end : 지정된 그리드 아이템 열의 끝 위치 지정
grid-column : 단축 속성
grid-row-start : 지정된 그리드 아이템 행의 시작 위치 지정
grid-row-end : 지정된 그리드 아이템 행의 끝 위치 지정
grid-row : 단축 속성
justify-self : 그리드 아이템 자기 자신의 가로 방향 정렬 지정
align-self : 그리드 아이템 자기 자신의 세로 방향 정렬 지정
place-self
order : 그리드 아이템의 배치 순서를 지정
'IT (Information Technology)' 카테고리의 다른 글
| [IT] HTML5 독학백서 (0) | 2022.09.03 |
|---|---|
| [IT] 웹개발 프론트엔드 로드맵 (by 드림코딩 Youtube) (0) | 2022.08.24 |
| [IT] 비전공자를 위한 이해할 수 있는 IT 지식 (0) | 2022.08.21 |