코딩 기록들
[FrontEnd] 5. CSS 본문
What is CSS?
html = 웹페이지를 구성하는 방식 (컨텐츠를 추가 & 보여줄 때 사용, 웹페이지의 필수사항)
CSS (Cascading Style Sheets) : html을 꾸밈. (색, 그림자효과 부여 & html위치 조정 등 html요소가 화면또는 기타 미디어에 표시되는 방법을 작성), 계단식 스타일의 문서(부모태그에 CSS가 정의되면 자식태그에도 동일하게 적용됨)
- selector : css를 누구에게 지정할것인지 대상 선택(id, class, attribute, sudo, universial, tag ... )
- declaration : 스타일 정의, 여러개 작성할수 있음, ';' 세미클론으로 구분
- property : 이미 css에 존재하는 값
body {
background-color : lightblue;
}
h1 {
color : white;
text-align : center; /*align : 수평정렬*/
}
p {
font-family : verdana;
font-size : 20px
}
CSS selectors
ID selectors
ex. #header { } = id의 속성이 header인것
Class selectors
ex. .header--logo{ } -> 태그의 클래스에 속성 값이 header-logo인것
-> 가장 많이 사용하게 됨(재사용성 때문)
Element selectors
p{ } -> html문서의 모든 p 의 스타일 지정을 하겠다
Universal selectors
* { } -> 모든 태그를 대상으로 공통스타일을 지정하겠다 (단, 느리므로 안쓰는것을 추천)
CSS를 정의하는 3가지 방법
- CSS는 적용범위에 따라 3가지방법으로 작성할수있다
1. Inline Style
한 태그의 레이아웃만 적용할 수 있음
- 태그에 직접 스타일을 추가함(추적어렵기때문에 권장x)
2. Internal Style
한 페이지의 레이아웃만 적용할 수 있음-> html안에서 정의한 'style'만 이용해서 만든것
- 웹페이지의 <style> 태그안에 스타일을 정의하는 방법
- external style의 내용중 일부를 추가/수정하고싶을때 사용
3. External Style
한페이지를 한번에 관리하는 방법-> 자주쓰임 (재사용성 때문) -> html밖에서 style 정의
- 별도의 CSS파일을 만들어 필요한 웹페이지에 로드하는 방법
- 관련된 태그에대한 스타일을 하나로 모아 관리 : 스타일수정, 추가가 용이
- CSS파일만 작성하므로 변경이력 추적에도 용이
Cascading Order (우선순위가 존재함)
- 우선순위가 높다 = 먼저 브라우저에 표시시킨다
- 순서에 따라 덮여쓰여지는 결과가 다름
# mystyle.css
body {
background-color: lightblue;
}
h1 {
/* color : 텍스트의 색상을 변경 */
color: navy;
/* h1태그의 왼쪽여백을 20px만큼 띄운다*/
margin-left: 20px
}
아래 예시에서는 external style인 link태그 이후에 internal style이 위치하므로, background-color = green
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 작성방법 실습</title>
<!--link에는 상대경로작성 : ./styles/mystyle.css (절대경로 : 폴더의 실제 저장위치)
상대경로에서 ./의 의미 : 현재 폴더
상대경로에서 ../의 의미 : 상위폴더-->
<link rel="stylesheet" href="./styles/mystyle.css">
<style> /*internal style 이용하기*/
p {
/*글자의 크기를 100px로(기본: 16px) 변경한다.*/
font-size: 100px;
}
body{
background-color: green;
}
</style>
</head>
<body>
<h1>This is a heading (Overwrite)</h1>
<p>This is a paragraph (Overwrite)</p>
</body>
</html>
아래 예시에서는, internal style보다 external style이 이후에 위치하므로 external style적용됨 : backgroun-color = navy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 작성방법 실습</title>
<style>
p {
/*글자의 크기를 100px로(기본: 16px) 변경한다.*/
font-size: 100px;
}
body{
background-color: green;
}
</style>
<link rel="stylesheet" href="./styles/mystyle.css">
</head>
<body>
<h1>This is a heading (Overwrite)</h1>
<p>This is a paragraph (Overwrite)</p>
</body>
</html>
Cascading & Specificity
Cascading : 하나의 태그에 여러 스타일을 지정할 수 있다
-> Spectificity
- 충돌이 될 때 : 나중에 쓰여진게 표현된다
- 단, id에 적는 값은 해당 html파일에서 유일해야함.
-> id로 스타일을 관리하지 않음
- 하나의 body안에서 여러 div 스타일을 별도로 주고싶다면,
class로 주는게 좋음
Inheritance 상속
-부모태그에 정의된 스타일은 자식태그에도 동일하게 적용됨(상속을 명시하지않아도 자동으로 적용됨)
- 모든 페이지에 동일한 스타일 정의하려면 <body> 태그에 스타일을 정의한다
- 자식태그에서의 상속 명시도는 가장 낮음(브라우저 기본스타일보다 낮음)
Box model
- html의 (헤더를 제외한)모든 태그는 box 이다.
- box model : 여백(margin, 태그와 태그 사이의 여백), 테두리, 패딩 및 실제콘텐츠로 구성됨
- 빨간선 박스가 하나의 태그 범위임
- margin은 태그와는 관련이 없음(태그와 태그를 떨어트림)
- padding : 경계선과 컨텐트 사이에 영역을 줌. 태그 안쪽의 영역!(여백줄때 사용)
* width에 320px을 주면= content에 320px이 들어감 -> padding + 20px, boarder : +10 px 되어 결과 : 350px이 됨
=> 패딩과 border를 합친것이 하나의 태그의 길이가 됨 !
* box-sizing : border-box : html의 모든 박스테이블을 변경해라! -> 보더까지 계산한 길이가 320이 됨
'FrontEnd Programming' 카테고리의 다른 글
| [FrontEnd] 7. Text decoration, Box align, Pseudo class & Pseudo element (0) | 2024.03.07 |
|---|---|
| [FrontEnd] 6. Margin collapsing, Width & Height, Display & Visibility (1) | 2024.03.07 |
| [FrontEnd] 4. HTML 공통 Attributes, 공통Event (0) | 2024.03.06 |
| [FrontEnd] 3. HTML 태그 상세2(video, audio, sementic) (0) | 2024.03.06 |
| [FrontEnd] 1. HTML5 문서구조, 주요 태그, 속성 (0) | 2024.03.06 |
