1.학습한 내용

CSS (디자인)

1. head 안에서 style 태그를 사용
   속성 : 속성값; 사용 - 세미콜론은 필수

<meta charset="utf-8">

<style>
	h1 {
		color: red;
	}
</style>

2. 바꾸고자 하는 태그 뒤 CSS 문법 넣기
   style

   <h1 style="background-color: pink;">Hello World</h1>

html 문서, css 문서로 따로 관리하여 연동 - 가독성과 효율성 향상을 위해

1. CSS확장자로 CSS 문서 만들기
2. html에서 외부 파일을 가져올 때 'link' 태그 사용

• rel="stylesheet" : 링크태그로 연동되는 파일의 타입, 스타일 시트를 명시
• type="text/css" : 연동되는 파일의 글자는 CSS 언어로 구성
• href="" : 연동되는 파일의 경로 입력

3. 양 파일 모두 저장해야 적용됨
4. head에 넣기

CSS 기능

1. 화면분할기능 : view -> layout -> columns2 (꿀팁)

2. 주석처리 : /별 , 별/

3. 상위항목(부모태그)에 디자인을 적용하면 하위항목(자식)에 똑같이 적용됨
   but a 태그는 기본적으로 파란색이라 영향 X

4. 하위 태그에 적용하면 모든 하위 태그만 바뀜

5. 단일 하위 태그에만 적용하고 싶을 때 : 부모태그를 앞에 붙여줌

   header(부모태그) h1(바꾸고자하는 태그){color: blue;}

6. 같은 디자인을 적용 시킬 때 쉼표를 통해 묶어서 적용 가능

선택자

CSS에서 Html 문서로 접근하는 방법

1. 타입 선택자

ex) html : h1 hello world /h1
css : h1{ color: red;}

2. id 선택자

태그에 id 이름을 부여해서 디자인을 적용하는 선택자
ex) html : h1 id = "test"
CSS : #test { color: blue;}

3. class 선택자

태그에 class 별명을 적용하여 디자인을 적용

ex) html : h1 class = "test"
CSS : .test { color: blue;}

*Id와 달리 class는 class를 여러개 가질 수 있음
ex) html : h3 class="bg-1 font-size-1">Class 선택자</h3
CSS : .bg-1{background-color: red;}
.font-size-1{font-size: 50px;}

*ID는 이름이기 때문에 한 개문서에 속성값이 하나만 있어야한다.
Class는 같은 이름을 가진 속성값이 중복되어도 상관없다.

--이러한 선택자들은 같은 h태그가 여러 개일때 각각 다른 디자인을 적용하고 싶을 때 사용

4. attribute(속성) 선택자

html 타입(type)의 속성 값을 가지고 디자인을 적용하는 방법
ex) html : input type="text" placeholder="이름"
input type="password" placeholder="비밀번호" 일때

CSS : input[type="text"]{border: solid 10px red;}
input[type="password"]{border: solid 10px blue;}

캐스캐이딩

1. 같은 태그에 다른 디자인을 주었을 때 가장 최근에 준 디자인(속성값)이 우선 / class가 있다면 class가 우선 / Id가 있다면 ID가 우선 /style이 있다면 style 우선

   style 속성 > id > class > tag

html : h1 style="color: grey;" id="color-2" class="color-1">Hello World</h1

css : #id {color: blue;}
.class {color: purple;}
h1 { color: red;} (tag)

위 상황에서는 grey 색이 나옴

2. 같은 상황일 때 더 디테일하게 주어진 것이 우선 순위가 높음

#intro div h1 {color: green;}

#intro h1 {color: blue;}

같은 명령이지만 위 명령이 div라는 디테일이 추가되었다.

CSS 기본설정

공간

1. width와 height로 설정
2. 크기를 px대신 %로 설정하면 창크기에 따라 공간도 같이 변경됨
3. min-, max- 를 붙이면 가로세로의 최소, 최대 크기를 설정가능하다.
4. border를 적용하면 테두리가 생긴다.
5. border-radius : 모서리의 굴곡을 설정

글자

1. 색상변경시 단어/색상코드/RGB번호 등으로 변경가능
2. font-size : 폰트 크기 변경
3. font-style : 폰트 스타일 변경 ex) italic, initial
4. font-family : 폰트 서체 변경 / 여러개 서체 입력 가능( 사용 가능한 폰트 먼저 표기) *sans-serif는 모든 브라우저에 호환
5. google font에서 폰트 가져올 수 있음 - 링크를 복사하여 head 부분 css 링크 밑에 붙여넣기하기
6. font-weight : 폰트 굵기 설정
7. text-decoration : 글자에 줄 넣기 ex)underline, line-through
   다른 글자에 넣고 싶지 않다면 다른 항목에서 none이라고 설정
8. text-align : 글자 정렬 /left, right, center
9. color : 글자 색 설정

리스트 스타일

ul li 에서 앞에 표시되는 표시를 설정
list-style: none;으로 설정

opacity : 투명도 설정 - 0~1 (1로 갈수록 투명)

CSS에서 이미지 넣기

1. background-image를 사용

2. background-image: url(icon.png); / 이때 url은 css파일과 같은 폴더안에 있어야한다.

3. 이때 설정한 넓이 보다 사진 크기가 작다면 반복해서 나타나는데 이를 제어하는 것이 background-repeat이다.
   4.background-repeat: ㅇㅇㅇ;
   repeat-x : x축으로만 반복
   repeat-y : y축으로만 반복
   repeat : x,y축 두 방향으로 반복
   no-repeat : 반복효과 없음

4. background-position : 이미지의 위치 조정(top, bottom, center, left, right,right top, right bottom... etc)

* html(img=src)과 css(background-image)에서 이미지 삽입 차이

1. html에서는 크기를 자유롭게 설정가능 그러나 css는 기본 깔린 틀에 따라 사진이 잘릴 수도 있고 틀에 비해 사진이 작을 수도 있다.
2. img태그는 정보를 가지고 있다. bgi는 alt가 없어 정보를 담을 수 없다.

2. 학습 내용 중 어려운 점

오늘은 이해안가는 부분은 없었다.
복습이 필요하다.

3. 해결 방법

복습 열심히 하기

4. 학습 소감

복습하기가 좀 귀찮긴하지만 해야한다.