23.04.11 CSS

sun_ovo·2023년 4월 22일
0

23.04.11

정보의 의미? - 시각장애인에게 무의미한 요소(color 등)는 정보라고 보기 어려움.
==> tag를 이용한 디자인은 정보의 가치를 낮추기 쉬움 ==> CSS를 통한 디자인

CSS
=> html이 정보에만 집중할 수 있도록
=> 중복되는 코드를 최대한 효율적으로 줄이고 변경하기 위해서

기본 문법의 2가지 방식
예시 1 - html의 속성으로써 <style="color:black">
: html의 속성으로써 사용
--> style : 값으로 반드시 CSS의 효과가 들어옴

예시 2 - tag를 통해

--> 'color : balck'만 쓴 것은 효과만 기재한 것이므로 어디에 적용할지가 불분명함. 따라서 'a { }'와 같이 적용 대상 지정을 위한 코드가 추가적으로 꼭 필요함.
( 'a { }' : 선택자(Selector), 'color : black' : 선언/효과(Declaration), 'color' : 속성(Property), 'red' : 값(Value))

html 속성으로 사용할 때, style 요소가 많을 경우 " " 내부에서 ;을 통해 구분
ex) color & underline
--> <style = "color : red ; text-decoration : underline">

font-size
text-align
span에는 text-align 적용x? : https://blogpack.tistory.com/773 -> inline과 block 요소 공부
class - 여러개 가질 수 있음. 대신 CSS 코드의 순서 상에서 가장 아래쪽 class가 적용됨.(절차지향언어)
id - class보다 상위 영역 - CSS 코드가 class보다 먼저 등장하더라도 id 속성 우선 적용 / id의 값은 한 웹 내에서 단 한번만 나타나야함.
(순서 : id > class > tag - 더 구체적인 대상이 우선적으로 적용 - **셋 중 가장 우선순위의 것이 하나만 적용되는 게 아님. 서로에게 영향을 주지 않는 요소라면 id class tag 모두 적용될 수 있음.)
selector

profile
전자공학도의 코딩 입문기 ٩(•̤̀ᵕ•̤́๑)

0개의 댓글