WEB/html,CSS 71

[html][css] css적용 우선순위 점수

우선순위 결정 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 css속성을 우선 적용할지 결정하는 방법 1. 명시도 점수가 높은 선언이 우선 2. 점수가 같은 경우, 가장 마지막에 해석되는 선언이 우선 3. 명시도는 상속 규칙보다 우선 4. !important가 적용된 선언 방식이 다른 모든 방식보다 우선(중요도) div{ color:blue !important; } !important : 점수 무한대 Hello 인라인 선언 방식 : 점수 1000점 #color_yellow{ color:yellow; } id선택자: 100점 .color_green{ color:green; } 클래스 선택자:10점 태그 선택자 점수 :1점 전체 선택자: 0점 상속: 항상 우선하지 않음. 점수 없음

WEB/html,CSS 2021.04.15

[html][css] 선택자 전부 다 / 기본선택자/ 복합 선택자 / 가상 클래스 선택자/ 가상요소 선택자/ 속성선택자

이 포스팅에 포함된 내용 1. 기본선택자 1-1. 전체 선택자 1-2. 태그 선택자 1-3. 클래스 선택자 1-4. id선택자 2. 복합선택자 2-1.일치 선택자 2-2. 자식선택자 2-3. 후손(하위) 선택자 2-4. 인접 형제 선택자 2-5. 일반 형제 선택자 3.가상클래스 선택자 3-1.hover 3-2.active 3-3.focus 3-4.first-child 3-5.last-child 3-6.nth-child 3-7.xxx-child 3-8.nth-of-type 3-9.not 4.가상요소 선택자 4-1. before 4-2. after 5. 속성선택자 5-1. [attr] 5-2. [attr=value] 5-3. [attr^=value] 5-4. [attr$=value] 기본선택자 1. 전체 선..

WEB/html,CSS 2021.04.15

[html] 전역속성 - class/id/style/title/lang/data-/draggable/hidden/tabindex

어떤 태그에도 다 사용할 수 있는 속성을 알아보자 1. class와 id 2. style 반가워 3. title 제목2 내블로그 4. lang 보통은 html 부분에서 언어를 지정해준다. 5. data-* 사용자 정의 데이터 속성을 지정. HTML에 JavaScript에서 이용할 수 있는 데이터(정보)를 저장하는 용도로 사용. data- 하고 *에 아무거나 쓸 수 있음 자바스크립트에서 활용을 할 수 있음 html에서 데이터를 보관하고 있다가 js에서 활용한다. 자바칩 프라푸치노 6. draggable HTML Global draggable Attribute (w3schools.com) HTML Global draggable Attribute HTML draggable Attribute Example A ..

WEB/html,CSS 2021.04.13

[html] select/ option 태그/ 선택할 수 있는 선택지 만들기/ datalist태그/ 자동완성 기능

기본 select메뉴는 이렇게 쓴다. 처음에는 하나만 보이고 밑에 누르면 여러 옵션이 뜨는 형태이다. select태그에 속성을 아래와 같이 size와 multiple을 추가했다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Document Apple Orange Banana Mango Fineapple Colored by Color Scripter cs 그러면 한번에 3개가 보이고 동시에 선택도 가능하다. option태그 속성에 대해서도 알아보겠다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 Document Apple Orange Banana Mango Fineapple Colored by Color..

WEB/html,CSS 2021.04.13

[html][css] css 스타일 초기화하는법/ reset css cdn

각각의 브라우저마다 기본 css의 스타일이 다르기때문에 같은 화면을 제공하기 위해 기본 css스타일을 초기화해야한다. 이렇게 원래 태그의 스타일이 있다. 구글에 reset css cdn이라고 친다 reset-css CDN by jsDelivr - A CDN for npm and GitHub jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use. ..

WEB/html,CSS 2021.04.08

[html] form 태그 속성/ action method autocomplete novalidate target

form태그의 속성에 대해 알아보자 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Document 로그인 Colored by Color Scripter cs 1. action submit을 눌렀을 때 어디로 보내겠다는 뜻 login페이지로 보내겠다는 뜻 2. method get방식과 host방식이 있다. get방식은 submit을 눌렀을때 주소창에 정보가 뜨는 것이다. post방식은 정보가 노출되지 않는다. 3. autocomplete 전에 입력했던 값을 자동완성으로 저장할 것인가. 기본값 on 4. novalidate 기본값은 이렇게 유효성 검사를 하게 되어있는데 novalidate를 하면 검사를 안하고 막써도 로그인버튼이 눌러진다. 5. target _self와 _blank가 ..

WEB/html,CSS 2021.04.08

[html] table태그 / 표 만들기/ table, td, tr, th/ 셀병합 colspan rowspan/ headers

기본적인 표 만드는 법 table태그는 표가 들어올 영역을 차지하는 태그입니다. tr은 행을 이야기 하는 것이고 행이 있어야 열이 있을 수 있습니다. 그러니까 tr먼저 사용합니다. 그리고 td는 열을 의미하는 것입니다. tr의 자식으로 들어옵니다. th는 제목입니다. table head라는 뜻이고 저절로 두껍게 표시가 됩니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 Document 타입 값 알파벳 A 숫자 7 Colored by Color Scripter cs index.html 1 2 3 4 5 6 7 8 9 10 11 12 table{ border-collapse: collapse; } td{ bord..

WEB/html,CSS 2021.04.08