현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.
1. CSS란?
내가 생각하는 대환장파티 언어..
앞길 먼데..css에서 쩔쩔..
본격적으로 내용 복습 들어갑니다.
CSS는 캐스케이딩 스타일시트(Cascading Stylesheet)를 의미한다.
- Cascading : 폭포같은, 계속되는, 연속적인
- Style : 멋을 내다
- Sheet : (종이나 문서) 한 장
= 연속적으로 스타일을 정의하는 문서!
CSS는 스타일을 정의하는 문서 형식이다. 태그와 태그가 중첩되어 연속적인(Cascading) 구조를 지닌 HTML 문서에 스타일을 추가한다.
HTML 코드가 다수의 ‘태그(tag)’로 구성되는 것처럼, CSS 코드는 다수의 ‘스타일 선언문’으로 구성된다. 스타일 선언문의 형태는 다음과 같다.
주석
CSS3
현 시점에 HTML5가 웹 개발 표준으로 인정받고 있는 것처럼, 스타일시트 또한 웹 표준 기술이 존재한다. CSS3가 바로 그 주인공이다.
2. CSS 문서 사용하기
CSS 문서
CSS 문서는 독립적으로 존재할 수 있지만, HTML 문서와 함께 사용하지 않는 CSS 문서
는 단지 하나의 텍스트 문서에 불과할 뿐이다. 즉, 혼자서는 할 수 있는 일이 없다!
CSS 문서에 정의된 스타일이 웹 브라우러 화면을 통해 보여지도록 하기 위해서는 반드시 HTML 문서 작성이 먼저 이루어져야 한다.
HTML 문서에 CSS 문서(코드)를 적용하고자 할 때는 다음과 같은 방식들을 사용할 수 있다.
- 인라인 스타일 : 태그에 직접 기술하기
- 스타일 태그 : 스타일시트를 위한 태그를 추가하여 기술하기
- 문서 간의 연결 : 스타일시트 문서를 따로 작성하여 HTMl 문서와 연결하기
인라인 스타일
태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식.
따라서 선택자는 필요 없다. 웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋다.
스타일태그
HTML 문서에 < style >< /style > 태그를 추가하여 그 안에 CSS 코드를 작성할 수 있다. ‘내부 스타일시트’라 표현하기도 한다.
문서 간의 연결
확장자가 * . css 인 스타일시트 파일을 생성해 그 안에 CSS 코드를 작성하고,HTML문서에 이를 연결해줄 수 있다. 이때는 < link > 태그를 사용한다.
- href : 연결하고자 하는 외부 소스의 url을 기술하는 속성
- rel : 현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성
= < link > 태그는 HTML 문서의 < head >< /head > 내부에서 사용해야 한다.
실습!
선택자 기본편
스타일 선언문의 선택자를 어떻게 입력하는가에 따라 스타일이 적용될 요소가 결정된다. 이때 요소는 오직 하나만 선택할 수도 있고 여러 개를 동시에 선택할 수도 있다. CSS는 다음과 같이 여러가지 유형의 선택자를 지원한다.
실습
3. 박스 모델(box model)
브라우저 화면은 가로와 세로를 축으로 하는 2차원 공간이다. 따라서 브라우저를 통해 렌더링되는 웹 요소들 또한 그 안에서 개별적으로 너비와 높이를 가진다. 박스 모델은 너비와 높이를 가지는 개별 요소를 가리켜 ‘박스’라 표현하고, 박스를 네 가지 세부 영역으로 나누어 구분한 일종의 디자인 모델이다.
CSS로 스타일을 정의할 수 있는 모든 요소에는 박스 모델 관련 속성 중 일부 또는 전부를 적용할 수 있으며, CSS는 영역별로 크기를 따로 설정할 수 있도록 다양한 속성들을 제공한다.
콘텐츠 영역의 크기부터 변경해보자
콘텐츠 영역의 너비를 결정할 때는 width 속성을, 높이를 결정할 때는 height 속성을 사용한다.
두 속성은 모두 크기를 결정하기 위해 사용하는 속성이므로, 속성값을 결정할 때는 수치와 단위를 함께 입력해 주어야 한다.
실습!
4. 테두리
테두리 스타일
테두리는 화면 상에서 요소가 차지하고 있는 공간을 뚜렷하게 표시해 다른 요소와 쉽게 구분할 수 있게 해주는 유용한 영역이다.
테두리 스타일을 정의할 때는 단축 속성인 border를 사용하거나, border의 하위 속성을 개별적으로 사용하는 방법을 사용한다.
모서리 둥글게(요소)
박스 모델의 테두리에는 (당연하게도) 네 개의 모서리가 존재하는데, CSS의 border-radius 속성을 사용하면 모서리를 둥글게 만들 수 있다.
실습!
5. 여백
여백의 안쪽, 바깥쪽 여부는 테두리를 기준을 정해준다.
상하좌우 여백 개별 지정
박스 모델의 여백에는 네 개의 면이 존재하는데, 속성값 사용 개수에 따라 네 면의 여백 크기를 달리 정할 수 있다.
안쪽 여백이 커지면서..
width나 height를 사용하면 콘텐츠 영역의 크기를 결정할 수 있다. 여기에 padding 속성을 추가 정의하면 여백이 생기면서 요소가 기존보다 더 커지게 되는데, 이를 원치 않을 경우에는 다음 속성을 사용할 수 있다.
실습!
끝맺음
이번 강의도 다음날꺼까지!!!!! ㅠㅠ
월요일부터 밤새서 다크서클 턱 밑까지 내려옴...
