#1 CSS의 역할 :
기존에 갖고 있는 엘리먼트의 속성을 변경
1-1 블럭 속성을 인라인 형태로, 인라인 속성을 블럭 형태로 변경 가능
1-2 글자 크기 및 색상도 조정 가능
#2 CSS 파일에서 주석 입력 방법 : /* 내용 */
#3 CSS가 HTML 문서에 적용되는 방식(우선 순위 대로)
1) 인라인(Inline) 스타일 방식
2) Internal - <head>영역에 style element 사용
3) External - <head>영역에 link element 사용하여 외부 CSS파일 링크 (*주로 사용)
-동일 순위 내에서는 맨 마지막에 입력된 방법대로 적용(절차지향적)
3-1. link 태그의 3가지 속성
- href: 파일의 경로 표시
- type: 파일의 형태 표시
- rel: stylesheet
(ex) <link href="파일경로" type="text/css" rel="stylesheet"
-----------------------
cf) HTML의 역할? 데이터 구분값을 명시
<> img, input, table (html 사용 필요)
cf) html과 css의 속성값 부여 방식 차이
- html은 queryString방식 key = value ( 속성 = 속성값)의 형태
ex) type="text"
- css는 object방식 key : value; 의 형태
- 인용마크 없이 세미콜론 사용(세미콜론은 속성값 부여 시 영역 표시)
ex) font=size 12px; background:blue;
* '=' 속성 값 부여 시, ':' 스타일 내용 부여 시 사용
* css 문법 : object 형태(엄밀히 말하자면 object는 아님)
----------------------
실습 1. <style> tag를 사용하여 글자 크기 및 색상 조정
1-1 인라인 스타일
- 인라인 CSS는 단일 엘리먼트에 특별한 스타일을 주기 위해 사용됨
- 인라인 CSS는 HTML 엘리먼트의 style 속성을 이용하는 방식
-
<h1 style = "color: red;"> This would be red. </h1>
1-2 style 엘리먼트 사용
- Internal CSS는 하나의 HTML 페이지에 스타일을 주기 위해 사용됨
- Internal CSS는 HTML 페이지의 <head> 영역에 style 엘리먼트를 이용하는 방식
-
<!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: orange;} p {color: green;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
* style element를 사용한 CSS 속성 부여 시 알아야 할 점
1. body tag 안에서 id/.class가 title이라는 element 선택
2. 컴퓨터적인 사고 방식으로 어떻게 하는 지
* style selector(선택자) 방식
- '{}' - 특정 선택자의 css 코드 입력 영역을 명확하게 구별
1-3 외부 파일 사용(*주로 이용)
- External style sheet는 다수의 HTML 페이지에 스타일을 주기 위해 사용됨
- 외부 스타일 시트 사용을 위해 각각의 HTML 페이지의 <head>영역에 링크를 걸어야 함
실습2. 블럭 속성을 가진 element를 inline 형태로 표출하자!
2-1. li에 대해 태그 적용
2-2. ul1 태그 안에 있는 li에 대해서만 적용
cf) id 속성: 특정 엘리먼트에 고유 값 부여,
id와 class는 기능적으로는 하나만 써도 작동
-id는 레이아웃 구성 시 사용
-class는 주로 반복적인 것이 있는 경우
*선택자
margin
서로 다른 엘리먼트 간 간격을 띄울 수 있음
padding
방향으로 값을 늘려줌
주로 box-sizing과 같이 쓰임-원본 사이즈 그대로 넣어서 알아서 계산해줌(내가 지정한 div값에 패딩값과 보더값이 자동 계산되어서 원하는 값을 계산없이 사용 가능)
# 여백 관련 style
#실습 1-1. Margine : 서로 다른 엘리먼트 간 간격을 띄울 수 있음(외부여백)
#실습 1-2. 위아래 여백 모두 15px 설정
#실습 1-3. 네 방향 모두 여백 0
#실습 2. Padding을 사용하여 내부 여백 생성
댓글