[KDT]FCFE - 2주2일 HTML,CSS TIP

leedocs·2021년 11월 30일
0
post-thumbnail

HTML TIP

inline 요소 특징

옆으로 수평하게 쌓인다.

<span>

글자 요소는 width, height 를 사용할 수 없다.

글자 요소는 margin padding은 위아래는 사용할 수 없고 좌우만 사용할 수 있다.

인라인 요소 안에는 블럭 요소를 사용할 수 없다.

block 요소 특징

위에서 아래로 수직으로 쌓인다.

block 요소의 가로너비는 부모요소만큼 최대한 늘어난다.

block 요소의 세로너비는 최소한으로 작게 유지한다.

block 요소 안에는 block , inline 요소 모두 사용할 수 있다.

전역 속성

title

: 요소의 정보나 설명을 지정

style

: 태그에 css 선언하는 방식

class

: 요소를 지칭하는 이름. ( 중복 가능 )

id

: 요소를 지칭하는 이름. ( 중복 불가능, 고유 이름 )

data-이름="데이터"

: 데이터를 잠시 저장해 두고 js에 활용할 수 있다.

*** defer 속성 활용

<script defer src="./main.js"></script>

: html 이 모두 로딩 된후 script를 동작 하도록 함.

CSS TIP

CSS 선언 방식

내장 방식 :

<style>
	div {
  		color: black;
  	}
</style>

inline 작성 방식 (권장 하지 않는다.) :

<div style={color:black;}></div>
<link rel="stylesheet" href="./style.css/">

@import 방식(직렬 방식 : css 문서 안에 css 문서를 연결하는 방식) :

@import url("./box.css");

=> style.css 로 연결하여 사용한다. ( 순서대로연결 - 지연된다.)
( box.css -> style.css -> index.html )

가상 클래스 선택자 (Pseudo-classes)

ABC:hover

: ABC요소에 마우스 커서가 올라가 있는 동안 선택.

ABC:active

: ABC요소에 마우스를 클릭하고 있는 동안 선택.

ABC:focus

: ABC요소가 포커스되면 선택.(input 요소 등에 사용)
( focus가 안되는 요소에는 tabindex="-1" 속성을 주면 가능하다.)

ABC:first-child

: ABC가 형제 요소 중 첫째라면 선택.(아니면 선택 안됨)

ABC:last-child

: ABC가 형제 요소 중 막내라면 선택.(아니면 선택 안됨)

ABC:nth-child(n)

: ABC가 형제 요소 중 (n)번째라면 선택.

.fruits *:nth-child(n+2)

: fruits 클래스를 갖은 요소의 모든 자식 요소 중 n+2 번째라면 선택(n은 0부터).//2,3,4,5,6,..

ABC:not(XYZ)

: XYZ가 아닌 ABC 요소 선택.

ABC::before { content: "앞!"; }

: ABC 요소의 내부 앞에 내용 삽입(content).(콜론 2개!)
( content 라는 속성과 꼭 함께 써야한다. )

ABC::after { content: "뒤!"; }

: ABC 요소의 내부 뒤에 내용을 삽입 (content).
( content 라는 속성과 꼭 함께 써야한다. )

[ABC]

: 속성 ABC를 포함한 요소 선택. (disabled, type, value..)

[ABC="XYZ"]

: 속성 ABC를 포함하고 값이 XYZ인 요소 선택.

강제 상속

color: inherit;

속성에 값으로 inherit 을 넣으면 부모요소의 스타일을 상속하여 적용한다.

우선 순위

  • 점수 ( 명시도 )

!important - 99999999999점

인라인 - 1000점

id 선택자 - 100점

class 선택자 - 10점

태그 선택자 - 1점

전체 선택자 - 0점

body - 상속은 계산하지 않는다.

profile
🏃🏽 동적인 개발자

0개의 댓글