css기초

다만, css가 길어질수록 가독성 떨어짐, 유지보수 어렵 2. css 양이 많아지면 별로 좋지 않음 3.html 파일과css파일을 따로 만들어 link태그로 연결 link 태그에는 다양한 속성들있음!! css연결시에는 rel과 href이렇게 두가지 속성 사용 rel:링크로 연결한 파일과 본문이 어떤 관계(relation)인지 지정해줌. ==>rel="stylesheet" href:연결한 파일의 경로 ==>href:./index.css ==>의미: 현재파일 안에있는(./) index.css파일을 찾는다. link 태그가 실무에서 많이 사용. 유자보수가 편하고 소스코드관리 쉬움. 검색이나 자동완성이용. 외우기보다는 이해. ### 4강 태그선택자 사용가능 :css가 적용된 모든 해당태그가 선택되게됨 아이디 선택자: #아이디명{ 속성:속성값 } 해당 아이디를 가지는 모든 요소. 클래스 선택자: .클래스명{ 속성: 속성값 } ==>클래스는 여러개 요소에 중복지정가능.해당 클래스를 가지고있는 모든요소를 찾아 css적용가능 부모 자식요소간에 자손 선택자:부모클래스는 다르나 자식 클래스 명이 같을때 하나만 선택하는 방법 .부모 클래스(선택자)명 .자식클래스(선택자)명 { 속성:속성값 } 둘 사이에 꼭 공백 하나 필요!!! 다중선택자: 두 선택자를 모두 붙이면 두 조건을 만족하는 모든 선택자 라는 뜻이됨. 자손선택자를 몰라서 선택이 곤란한경우등에 이용. 공백없이 중복적용하고 싶은 선택자 쭉적어 나열. .class#id 의 경우, .class.class ......의 경우 .class#id태그 혼용사용도 가능 ### 5강 text-decoration : 글자꾸밈(밑줄, 취소선) font-style:글자 기울임. 구체적 옵션도 선택가능 color: 글자색 지정 이때 앞에 font 나 text 같은 접두어 없음.

7강

인라인요소: 여러개 요소 연속해 입력해도 다음줄로 넘어가지 않고 옆으로 쌓임.
태그에 할당된 공간만 차지.
span태그 등.
블록요소: div태그,p태그 등. 블록요소를 여러개 연속으로 쌓으면 옆으로 붙는 것이 아니라 다음줄로 자동으로 넘어감.
좌우값 인위적으로 정해주지 않으면 부모요소의 가로값을 가득 채움

9강

css레이아웃
:html을 보기좋게 배치하고 재배열 하는 것.
css로 적절하게 배치하고 정렬하는것.

11강

float:전통적 레이아웃 방식(현재 거의 사용하지 않음)
-->flex:float보다 편리-->Grid: flex와는 조금다르나 둘다 레이아웃을 목적으로 하는것은 같음
flex와 grid는 상황에따라 혼용
float사용안하는 이유: 반응형 웹에 적합하지 않기때문.
반응형웹?:접속하는 기기의 너비에 맞취 레이아웃이 변하는 웹페이지.
레이아웃이 어떻게 변해왔는지 알면 flex를 더 효과적으로 알 수 있으니 float도 알아보기.

12강

float:띄운다. 기본값(none)
특정한 컨테이너 좌측이나 우측으로 강제배치하는 요소
float:left
float:right
clear:none(기본값)
float가 적용된 요소, 또는 그에 영향을 받고있는 요소들에적용됨.
float은 항상 after속성
clear:left ==>float:left가 적용된 태그를 해재한다고 보면됨
clear:right==>//
clear:both =>모든요소의 영향력 해재
????

13강

flex 이용하려면
display를 flex로 변경
독자적인 속성으로 적용됨.
direction:방향
정렬의 방향.==>flex direction
종류:row(가로. 기본값),column(세로)
요소가 flex되면 중심축이 생김
그리고 방향(가로-->세로)바꿀수 있음
justify -content :중심축의 방향을 정한다.
flex-start: 얘가 기본값
flext-end끝쪽에 붙음
center:해당중심축을 기준으로 가운데정렬
space-arund :각각의 아이템에 균일한 여백 들어감. 처음과 끝부분에도.양끝여백과 나머지여백 크기가 차이남.
space-between:나머지지는 균일한 공백이 있으나양끝은 공백없이 붙어있음
space-evenly:양끝여백과 나머지 여백이 차이 없이 균일하게 들어있음.
align-items:중심축의 반대방향의 정렬
기본값 flex가 가로방향이니 기본값으로 사용한다면 세로 방향정렬.
주의: align-items는 flex-item이 한줄일때 우선 적용됨
두줄이상일경우는 align-content사용

6강

박스모델:
모든 html요소는 박스형태!! 이러한 모델자체를 css박스 모델이라고 한다.
내용이 들어가는 content
content를 감싸는 padding
padding을 감싸는 border(외곽선===태두리)
border바깥의 외부여백이 바로 margin.
box-sizing
:두가지의 속성값존재
content-box: content영역 기준으로 박스 사이즈 적용==>기본값
2)border-box: border(외곽선)영역 기준으로 박스 사이즈 적용
10강
다양한 선택자
1.전체선택자: 모든요소 선택하는 선택자
{
속성: 속성값
}
그룹선택자: 여러 선택자를 동시 선택한 뒤 동일한 css를 적용하고 싶을 경우
원하는 선택자들을 콤마(,)를 이용해서 연결해주면 됨
가상클래스 선택자:
css만으로 가상클래스요소를 추가
선택자:가상클래스 { 속성: 속성값 }.class:first-child { 속성:속성값 }
==>특정클래스의 어떤태그의 첫번째
: .box1 p:first-child { background:red }
첫번째 p태그를 선택
.class:last-child { 속성:속성값 }
마지막요소 선택
몇번째 요소 선택:
.class:nth-child(n) { 속성:속성값 }
뒷부분 소괄호에 정확한 숫자 넣음
연산자도 가능
=>.box1 p:nth-child(3) { 속성:속성값 }
box1 클래스의 p태그 세번째요소
.box1 p:nth-child(2n) { 속성:속성값 }
p태그의 2의 배수들 선택
기본연산지들도 모두 사용가능.
홀수(2n-1)
:hover
요소위에 마우스 올라갔을때 일어나는 것.
요소(.class등):hover {
속성:속성값
}