티스토리 뷰
CSS는 HTML 문서에 크기나 색상 등 스타일에 관한 요소들을 적용시킬 때 사용된다.
<CSS 적용 방법>
CSS 사용방법은 일반적으로 아래와 같이 사용한다.
- <head> 태그 내에 <style> </style> 태그를 통해 스타일 시트를 작성하는 방법
- 태그내에 style 속성 지정해 주는 방법
- 스타일 시트를 css파일로 작성한 뒤 <link>태그나 @import를 이용하여 적용하는 방법
- <head>태그 내에 <link href="style.css" type="text/css rel="stylesheet"> 작성
CSS 스타일 시트는 다음과 같이 구성된다.
선택자(Selector) {속성(property : 값(value) ; 속성2(property : 값2(value); }
선택자(Selector)란 스타일을 적용시킬 대상을 지정해주는 요소이다.
예를들어, 선택자로 h1 태그 입력했다면, h1 태그 전체에 스타일을 적용시킬 수 있다.
<선택자 지정 방법>
- 동시에 여러 선택자를 입력하려면 콤마(,)로 구분해주면 된다.
- .class이름 으로 지정해주면 클래스를 선택자로 사용할 수 있다.
- #id 로 특정 id를 선택자로 사용할 수 있다.
이외에도 특정 속성을 가진 요소를 선택하는 속성 선택자, 특정 상황이나 조건을 만족시키는 요소를 선택해주는 가상 클래스(pseudo-class) 선택자 등 다양한 선택자들이 존재한다.
참조 : https://www.w3schools.com/cssref/css_selectors.asp
만약, h1 태그에 스타일을 지정해주고, 특정 id 속에도 스타일을 지정해주었는 데, 만약 h1에 속하는 id 태그는 어떤 스타일이 적용이 될까?
이런 경우 우선 순위가 존재하는 데, 쉽게 생각하면 좀 더 구체적으로 지정해주는 선택자에 우선순위가 높다. 따라서 일반적으로는 특정 id 속성보다는 h1태그가 좀 더 포괄적이므로 id 속성의 우선순위가 높다.
추가로 /* 스타일 시트 내에 주석문은 이와 같이 작성한다.*/
<박스 모델 (Box model) >
HTML 태그들은 각자 하나의 박스로 구성되어있다.
예를들어, <div> 태그로 특정 영역을 묶었을 경우, <div> 태그로 묶인 부분 역시 하나의 보이지 않는 박스로 구성된다.
박스는 다음의 4개의 영역으로 구성된다.
- content : 텍스트나 이미지에 해당하는 내용 영역
- padding : 내부의 여백
- border : 테두리
- margin : 외부 여백
콘텐츠 영역은 width, height 속성 등을 통해 크기를 지정해줄 수 있으며,
padding과 margin에는 padding : 20px 등으로 직접 여백의 크기를 지정해줄 수 있으며, 상하좌우 여백 값을 다르게 주고싶다면, padding-top, padding-bottom, padding-right, padding-left 와 같이 속성을 지정하여 다르게 여백 값을 줄 수 있다.
테두리는 border : width, style, color 순으로 속성을 입력하여 간단히 표현할 수도 있으며, 다양한 속성을 이용해 효과를 줄 수도 있다. 테두리에 관한 다양한 설정 방법은 아래 링크를 통하여 참고할 수 있도록 한다.
참고 : https://www.w3schools.com/css/css_border.asp
<색 표현법>
CSS는 color, background-color, border-color 등 다양한 색 관련 속성들이 존재한다.
에 관련된 속성(property)에는 값(value)으로 색상을 입력해주어야 한다.
색을 표현하는 방법은 일반적으로 아래의 방법을 사용한다.
- RGB 값을 이용하는 방법 → rgb(255,255,255) 와 같이 Red, Green, Blue에 해당하는 0~255 사이의 값을 입력해주는 방법이다.
- 색상코드를 이용하는 방법 → #FFFFFF 와 같이 표현하며 # 뒤의 두 글자는 Red에 해당하는 값(0~255)을 16진수로 변환한 것이며, 그 뒤의 두 글자는 Green, 그 뒤의 두 글자는 Blue에 해당하는 값을 16진수로 변환한 것이다.
간단하게 검색창에 색상코드 등 을 검색해서 원하는 색상의 코드 값을 얻을 수 있다. - 색 이름을 사용하는 방법 → css3 표준에는 140개 색 이름이 지정되어있다. 이를 통해 간단히 코드나 값 대신 이름으로 색을 지정할 수 있다.
색이름 목록 : https://www.w3schools.com/colors/colors_names.asp
<텍스트 꾸미기>
font : font-style, font-weight, font-size, font-family 순으로 입력하면 간단히 텍스트에 관한 속성들을 빠르게 지정할 수 있으며, 물론 각각의 속성을 따로 지정해주어도 관계없다.
font-style은 normal, italic(이탤릭체), oblique(약간 기울임) 중에서 선택할 수 있다.
font-weight에는 normal, bold(굵게) 등을 지정해줄 수 있다.
font-size는 글자크기이며, 20px와 같이 직접 정해주거나, 상대적인 크기 단위인 em을 사용해줄수도 있으며, medium, small, large 등으로도 표현 가능하다.
font-family는 글씨체를 나타내며 여러개를 순서대로 나열해서 웹 브라우저가 지원하지 않을 경우 다른 폰트가 사용될 수 있도록 하는 것이 좋다. 폰트 이름에 공백이 있는경우에는 반드시 "" 로 묶어줘야한다.
<화면 배치 관련 속성>
display 속성을 이용하면, HTML 박스를 원하는 유형으로 바꿀 수 있다. 값으로는 block, inline, inline-block을 지정할 수 있다.
position 속성을 이용하면 원하는 위치에 HTML 박스를 배치할 수 있다. 디폴트 값으로는 static이 지정되어있으며,
relative는 현재 위치에서 상대적인 위치로 이동시킬 때 사용할 수 있다. 만약, 값으로 absolute를 지정해준다면, 부모 태그내에서 절대적인 위치를 정해줄 수 있으며, 값으로 fixed를 사용한다면, 화면에서 항상 같은 자리에 콘텐츠가 고정되도록 지정할 수 있다.
float 속성을 이용하면 화면의 폭이 변해도 유동적으로 항상 같은 자리에 내용을 위치시킬 수 있다.
visibilliy속성은 값으로 visible, hidden 등을 지정해줄 수 있는데, 말 그대로 콘텐츠 내용을 표시하거나 감추는 데에 사용된다.
overflow속성은 콘텐츠의 내용이 박스의 크기를 벗어날 때 어떻게 처리할 것인가에 대한 속성이며, 값으로 visible을 지정할 경우 영역을 넘어서도 출력이되며, hidden으로 지정할 경우 벗어나는 영역의 내용이 짤리게 된다. scroll을 지정하면 스크롤 바가 형성이 되고, auto는 말그대로 콘텐츠의 크기에 벗어날 경우 자동으로 스크롤이 형성되도록 한다.
참고 : https://www.w3schools.com/css/default.asp
CSS 코드 검사 사이트 : http://css-validator.org/validator.html.ko
'Web Programming > HTML5 CSS3' 카테고리의 다른 글
| HTML5 이벤트(Event) 개념 정리 (0) | 2019.06.25 |
|---|---|
| HTML5 웹 워커(Web worker) 기본 정리 (0) | 2019.06.23 |
| HTML5 웹 스토리지(Web storage) 간단 요약 (0) | 2019.06.22 |
| HTML5 웹 폼(web form) 구성하기 (0) | 2019.06.21 |
| 기본적인 HTML 사용방법 정리 (0) | 2019.06.11 |