roofTopCaat의 코딩노트

시맨틱 HTML 이란 시맨틱 HTML은 HTML문서를 작성할 때 다수의 사람이 직관적으로 이해가 가게끔 설정된 명칭의 모임이다 1. / navigation header 태그는 웹 페이지의 탑 섹션, 특히 메인 타이틀 / 로고 / 링크 내비게이션등으로 구성되며 웹 페이지에 처음 방문하는 유저들이 페이지의 목적성을 파악할 수 있는 부분이다 nav 태그는 주로 웹 페이지 메뉴 항목을 탐색하는 곳에 쓰인다 roofTopCaat hello, my name is roofTopCaat # my github repo # my tistory blog # my skill stacks 2. main 태그는 웹 페이지의 주요 내용을 담당한다 About my Blog Welcome to my Tistory Blog! 3. ar..

Media Query 컴퓨터, 스마트폰, 태블릿 등의 다양한 디바이스 환경에 맞춰 변화하는 UI 셋을 만들어 주기 위한 CSS 기술이다 미디어 쿼리는 미디어 유형과 미디어 특성을 기반으로 동작한다 미디어 유형은 장치의 종류가 어떤 것인지를 말하며 미디어 특성은 장치 속성이나 상태를 기반으로 하며 화면 너비 / 장치 방향 / 픽셀 밀도등을 포함한다 미디어 유형 , 쿼리 연산자 , 쿼리 조건은 다양하나 대표적으로 쓰이는 것은 screen이며 생략가능하다 추후 필요에 따라 검색하면 되기에 깊게 들어가지 않는다

CSS 포지셔닝의 종류 Static (정적 포지셔닝) Relative (상대적 포지셔닝) Absolute (절대적 포지셔닝) Fixed (고정적 포지셔닝) 1) Static(정적) 포지셔닝 고정적 위치값을 가지며 left나 top값을 추가할 수는 있지만 기능하지 않는다 2) Relative(상대적) 포지셔닝 고정적 위치값을 지니나 left나 top 등으로 위치값을 상대적으로 변화시킬 수 있다 3) Absolute(절대적) 포지셔닝 가장 가까운 ancestor의 위치와 상대적으로 관련된다 참고할 ancestor가 없다면 좌측 상단에서부터 값이 적용된다 4) Z - index z 인덱스는 가로세로 xy축 다음의 3차원적 포지션이다 일반적으로 -1과 0값으로 위치를 조정한다 5) Fixed(고정적) 포지셔닝 ..

1) Group (복수 지정) h1, h2, ...임의값 { background-color:blueviolet; color:red } 2) Parent > Child (내부 자식이 한 단계 아래일 때만) .Parent div > Child div { color:firebrick; } ABC ㄱ ㄴ ㄷ .box > "done" { } 이나 .box > "list" { } 로 선택가능하다 3) Descendant (손자선택기) (하나의 최상위 항목에서 중위를 생략하고 하위 항목을 선택한다) (이 값에 부모자식 > 를 넣어서 하면 작동되지 않는다) .최상위 div li { color:blue; } 4) Chaining (선택기 연결) (모든 선택기가 참일 때 적용) (사이 띄어쓰기가 없다) element.di..

css cascade position -> Specificity -> type -> importance position 아래쪽에 위치할수록 우선된다 Specificity 범위가 좁아질수록 우선된다 element 4순위 class 3순위 attribute 2순위 id 1순위 Type(유형) 외부에서 내부, 내부에서 인라인으로 갈수록 우선된다 외부 CSS 3순위 내부 CSS 2순위 인라인 CSS 1순위 최고 순위 !Important;(중요도 키워드) !important;의 유무에 따라 우선된다 color: red; 2순위 color: green !important; 1순위

1) Element Selector 하나의 요소를 통으로 고름 2) Class Selector 클래스는 어떤 html의 요소에든 적용가능하다 Red Blue Green paragraph 3) ID Selector 클래스 선택기와 비슷하나, 클래스 선택기는 다중으로 적용가능하지만 ID 선택기는 단일로만 적용가능하다 Red Blue Green 4) Attribute Selector (특성 선택기) true, false를 통해 원하는 요소에 css값을 넣을 수 있다 Drag me Don't Drag me Don't Drag me 이렇게 하면 Drag me가 빨간색이 되고 Drag me Don't Drag me Don't Drag me 이 경우엔 Don't Drag me가 빨간색이 된다 5) Universal ..

● css는 ● js는