-
[부스트코스] 1. 웹 프로그래밍 기초 - CSSFront-end/부스트코스 : 웹 프로그래밍 2020. 2. 16. 15:25
html 강의를 마치고 css 강의를 듣고 정리해보려고 한다.
css 강의가 6개이기는 하지만 한 번에 듣고 하나의 포스팅으로 작성한다.
참고 강의 :https://www.edwith.org/boostcourse-web/lecture/16673/
www.edwith.org
* CSS 선언과 적용
CSS는 3가지로 이루어져 있다. -> selector, property, value
아래 코드와 같이 선언한다. (span 태그의 글씨 색상을 red로 한다는 뜻이다)
span { color:red; }CSS 속성을 HTML에 적용시키는 방법은 3가지가 있다. (우선순위 inline > internal = external )
- inline : HTML 태그 안에 CSS 코드를 넣는 방법 -> 유지보수가 어려움
- internal : HTML 문서 head 영역에 코드를 넣는 방법 -> 별도의 CSS 파일 관리를 하지 않아도 됨
- external : 별도의 CSS 파일을 만들어서 HTML에 include하는 방법
<html> <head> <link rel="stylesheet" href="style.css"> </head> </html>
* CSS 상속과 cascading
CSS 상속이란, 상위 태그에 적용된 스타일을 하위 태그에서도 동일하게 사용하는 것이다. -> 재사용성이 좋음
매번 불필요하게 적용시키지 않아도 되므로 굉장히 효율적으로 코드를 작성할 수 있다.
그러나 box-model 속성들은 상속되지는 않는다.
이 속성들의 예시에는 width, height, padding, margin, border 등이 있다. (크기나 배치에 관련된 것들)
CSS는 여러가지 스타일 정보를 기반으로 최종적으로 경쟁에 의해서 적절한 스타일이 반영된다.
선언방식에 따라서 inline > internal = external 우선순위로 적용이 된다.
우선순위가 같다면, 같은 영역에 대해서 상이한 스타일을 적용했을 때 최종적으로 나중에 것이 적용이 된다.
또한, 더 구체적으로 표현된 것에 우선하여 적용이 된다.
동일한 영역에 class와 id 각각에 스타일을 적용했을 때는 id가 더 큰 우선순위를 가진다.
* CSS selector
CSS selector란, HTML의 요소를 속성을 통해 쉽게 찾아주는 방법이다.
element에 스타일을 지정하기 위해 3가지 선택자를 사용할 수 있다.
- tag
- id : #id
- class : .class
콤마를 기준으로 여러 그룹을 선택할 수도 있다.
h1, span, div { color :red }* CSS rendering
layout 작업 : HTML elements를 화면에 배치 (=rendering 과정)
element는 위에서 아래로 순서대로 블럭을 이루며 배치되는 것이 기본이지만 다양한 표현을 위해 CSS는 추가적인 속성을 제공함
- display 속성
block
ex. div
위에서 아래로 쌓이는 element inline
ex. span, a
옆으로 흐르는 element, 우측&아래쪽으로 빈자리를 차지
높이와 넓이를 지정해도 반영이 되지 않음
inline-block - position 속성 : 위치에 관한 속성 (default : static)
static 기본값 absolute 기준점에 따라서 특별한 위치에 위치 (top/left/right/bottom) relative 원래 자신이 위치해야 할 곳을 기준으로 이동 (top/left/right/bottom) fixed viewport 좌측, 맨위를 기준으로 동작 - float 속성 : 기본 배치에서 벗어나서 떠있기 (left, right)
일반적인 배치에 따라 배치된 상태에서 float는 기본적인 flow에서 벗어난 형태 -> block 엘리먼트가 의식X
2차원 평면에서 떠올라 있다고 생각하면 된다.
원래 element들은 아래로 쌓이는데 float를 이용하면 우리가 알 수 있듯이 왼쪽 오른쪽 두 칸을 둘 수 있다.
하나의 블록엘리먼트는 box 형태이기 때문에 box의 크기와 간격에 관한 속성으로 배치를 추가적으로 결정
-> margin, padding, border, outline으로 생성
padding : element와 콘텐츠 사이를 조절, padding이 커지면 element 크기가 커짐
element의 크기는 부모의 크기가 기본
box-sizing : content-box;box-sizing : border-box;* Layout 구현 방법
- 전체 레이아웃은 float를 사용해서 2,3단 컬럼 배치 구현 -> 브라우저 지원범위 확인
- 특별한 위치에 배치하기 위해 position absolute를 사용하고 기준점을 relative로 설정
- 네비게이션과 같은 element는 block를 inline-block으로 변경해서 가로로 배치
다음 강의는 다음 포스팅으로 이어집니다.
'Front-end > 부스트코스 : 웹 프로그래밍' 카테고리의 다른 글
[부스트코스] 1. 웹 프로그래밍 기초 : HelloWorld 서블릿 컴파일 및 실행 (0) 2020.02.19 [부스트코스] 1. 웹 프로그래밍 기초 : JDK 설치하기, 환경설정 (0) 2020.02.19 [부스트코스] 1. 웹 프로그래밍 기초 : HTML 구조설계, class&id (0) 2020.02.02 [부스트코스] 1. 웹 프로그래밍 기초 : HTML tags, layout (0) 2020.01.29 [부스트코스] 1. 웹 프로그래밍 기초 : WAS (웹 어플리케이션 서버) (0) 2020.01.29