참고 강의 : 유투브 생활코딩-WEB2 CSS
이전에 들었던 WEB1-HTML의 다음단계 강의
CSS
Pseudo class selector
class selector 처럼 작용하지만 class selector 는 아니고 여러 특수한 선택들을 할수있게 하는 selector. 각각의 element 상태에 따라 선택하는 선택자!
맛보기
- a:link = 방문하지 않은 링크의 색
- a:visited = 방문 기록이 있는 링크의 색
- a:active = 활성화 되는 링크의 색
- a:hover = 마우스가 가리키는 링크의 색
- a:focus = tap 키로 인해 focusing 된 링크의 색
여러 이유로 인해 focus는 젤 마지막에 첨가한다!
float
이미지를 배치할때 사용하는 CSS 속성
코드 살펴보기
<style> imt{ width:200px; float:right; margin-right:20px; margin-bottom:10px;
img의 스타일 지정
- 이미지 크기 : width
- 이미지 위치 선정 : float - 오른쪽
- 이미지 오른쪽의 여백 설정 : margin-right 20픽셀
- 이미지 아래쪽의 여백 설정 : margin-bottom 10픽셀
<p style="clear:both;">Style 효과 선택적 지우기
- clear:right 오른쪽 효과 무시
- clear:left 왼쪽 효과 무시
- clear:both 양쪽 효과 무시
-> 보통 both로 사용하곤 한다
기본 문법
웹 페이지에 CSS를 삽입하는 방법
- Style 태그 사용 (17번째 줄 코드)
<li><a href="2.html: style="color:red; text-decoration:undrline">CSS</a></li>- Style 속성 사용 (6번째 줄 코드 부터~)
<style>
a {
color:black;
text-decoration: none;
}
</style>
세미콜론 (;) 으로 구분 필수!
각 영역의 이름
- Selector
- Declaration
- Property
- Property Value
속성
검색 적극 활용하기!! (코딩은 기계와 함께 하는것! 검색 활용!)
ex) 특정 글의 크기를 변경하고 싶어!
-> CSS 에서 어떤 속성(property)가 글(text)의 크기(size)를 지정하지?
-> CSS text size property "font-size"
ex) 글을 가운데 정렬 하고 싶어!
->CSS text center property "text-align: '위치(center, left, right)' "
선택자의 기본
+) Class 속성은 여러가지를 지정할 수 있고, 이들은 띄어쓰기로 구분한다 (27번째 줄 코드 참고)
+) 하나의 태그에는 여러개의 속성이 들어올 수 있고, 여러개의 선택자를 통해서 하나의 태그를 공동으로 제어할 수 있다.
BUT!! 이 상황에서는 보다 가까이에 있는 명령이 더 큰 영향력을 받는다.!! (우선순위 고정 X)
ex) 위의 결과물에서 코드 순서 수정 시
이런식으로 CSS의 색이 빨간색에서 회색으로 바뀐다.
이럴때 사용하는 것 = id 선택자
- id선택자와 class선택자 중 id선택자이 우선순위가 더 높음을 확인
- class선택자와 tag선택자 중 class선택자가 우선순위가 더 높음을 알수 있음
id 선택자 > class 선택자 > tag 선택자
- id의 값은 단 한번만 등장해야 한다
-> id값으로 active가 나오면 더이상 active는 사용 할 수 없음- class의 값은 중복 사용 가능하다
selector 검색법
"CSS selector"
Box model
- h1으로 지정된 제목의경우 할당된 위치 전부를 사용!(그림으로 이해하기)
- a로 지정된 하이퍼링크의 경우 지정된 text크기 만큼만 사용!
-> 이 때문에 h1으로 입력된 내용 다음글은 자동으로 줄바꿈이 되지만 a로 입력된 하이퍼링크는 줄바꿈 뒤지 않는다.
이는 block level elements와 inline elements 성격 때문. (작성한 코드 7번째, 15번째 주석 참고 ( + CSS에서 주석 표시법 참고)
+) 제목을 inline elements로, 하이퍼링크를 block level elements로 지정할 수 있다.
display:inline; display:block;
+) tag들을 아예 안보이게 하고 싶을땐display:none;입력하면 사라짐!
중복 제거하기
, 사용과 border 생략!
기존 코드
<style> h1{ border-size: 5px; border-color: red; border-style: solid; } a{ border-size: was 5px; border-color: red; border-style: solid; } </style>중복을 제거한 코드
<style> h1, a{ border: 5px solid red; } </style>+) 5px solid red의 순서는 상관없음
기타) box model의 여백, 크기
- padding = content와 테두리(border)사이의 여백
- margin = 다른 content들 사이의 여백
- display:block = 기존에 설정되어 있는 block특성.
- width = content의 크기를 임의로 지정하기
+) 웹 페이지 우클릭 > 검사
잘 사용하기! 어떤 부분이 어떤 영향을 받는 상태인지를 알려줌. 이를 이해해야 구조를 이해하는데 도움이 된다!
box model 응용편
