html_css_js_log

Tag : 태그 elements : 엘레먼츠 tag 및 contents

표를 나타내는 HTML 태그기본 스타일: 중앙 정렬(text-align:center), 두껍게(font-weight:bold)표 내부에서 행을 나타내는 태그기본 스타일: 왼쪽 정렬(text-align:left)

br enter와 같다 열고 닫기 없이 `` 이 자체로 사용된다. a 하이퍼 링크 마우스로 클릭시 지정 페이지로 이동 가능하다. 네이버 .atag{ text-align: center; }

table>(thead>tr\*2)+tbody>tr^2table>(thead>tr2{theadtr$$})+tbody>tr2{tbodytr$$$}

div>a 선택자의 길이가 길수록 우선순위를 높게 가져간다.a 태그를 사용하는 2가지에 대해 따로 속성을 정의 할 수 있다.

정렬 >+ 변경하고 싶은 태그의 상위태그에 적용을 시킨다. text-align >+ 대상 엘리먼트의 글자와 자식 inline 요소만 정렬한다 대상 엘리먼트가 아니라 그것의 텍스트만을 정렬한다

  개수 만큼 공백이 생긴다.

태그의 선속성 옵션 적용 none : 선을 만들지 않습니다. line-through : 글자 중간에 선을 만듭니다.overline : 글자 위에 선을 만듭니다.underline : 글자 아래에 선을 만듭니다.initial : 기본값으로 설정합니다.inherit : 부

src 필수 포함 포함하고자 하는 이미지로의 경로를 지정alt 이미지의 텍스트 설명필수는 아니다스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명접근성 차원에서 매우 유용 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속

tag를 감싸는 border(box)를 기준(경계)으로 바깥쪽 여백 tag를 감싸는 border(box)를 기준(경계)으로 안쪽 여백

nth childnth last childfirst childlast childtag 안에 모든 요소 중 N번째 요소tag 안에 A라는 요소 중 N번째 요소tag 안에 모든 요소 중 첫번째 요소tag 안에 모든 요소 중 마지막 요소tag 안에 A라는 요소 중 첫번째 요

margin을 이용해 스스로 정렬

선언자에 따라 우선순위가 다르다는 것이다.0순위 우선권을 부여하여 표시할 수 있게 하는 속성아이디 선언시 숫자가 앞에 올수 없다. 문자 뒤에 숫자는 올수 있다 / 1a (x) / a1(o)중복 선언은 안된다. 유일 해야한다.중복 선언 가능여러개의 클래스를 가질 수 있다

https://dasima.xyz/css-attribute-selector/

display default값이 inline 속성 이다.a의 같은 경우, 초기에 속성 값을 노멀라이즈. color는 inherittext-decoration은 none 혹은 inherit으로 초기화를 시킨다.

body{ /* 기본적으로 body에는 margin 값이 존재한다.*/ margin: 0; /* 그러므로 초기화 한다 */ }

Unordered List목록 리스트List ItemOrdered List순서 리스트

제목(heading)은 h1, h2, h3 ~ h6 태그로 만든다.문서의 구조와 밀접하므로 순서에 맞게(크기에 맞게) 사용하는 게 좋다.

특정 부분에 공백이 생기는 문제점 발생font-size = 0 로 해결 가능

노말라이즈 - 범용성 큰거<a> <ul> <li> 라이브러리 - 특정 <내가 만들어둔 클래스> \[class = "inline-grid"]커스텀 - 기존 수정 방식

CSS에 div 각각에 속성을 부여하는 방식css의 class로 너비를 지정하여 html에 부여하는 방식

css height의 비율은 inherit이 아니므로 포함하는 태그 모두를 적용시켜야 한다.

작업_1 css 노말라이징

CSS}

HTMLCSS}

마크업 > 인라인그리드 > HTMLCSS

HTMLCSS

box-sizing >+ 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성 >>+ 기본값 : content-box >>+ 상속 : No >>+ 애니메이션 : No >>+ 버전 : CSS Level 3 >### box-sizing default : box-siz

CSSimg-boximg의 display 초기속성이 inline-block으로 라인이 생기므로 이를 제거하여 이미지만을 쓰기위한 블록을 만듬

음수 마진 이용해서 이미지 여백 처리

position 속성

html >## css

html >## css

text-overflow:ellipsis; 사용 시overflow-x:hidden; 옵션도 같이 사용해서 숨겨준다.

HTMLCSS

CSS일반적으로 400size 폰트를 불러와font-weight , font-size : bold, 2~4rem; 값으로 굵기를 굵게 한다영문폰트 : google-font한글폰트 : 눈누

console.log에 의한 내용이 계속 쌓이므로 초기화의 필요성이 있다.

변수 : 값을 저장하는 공간값 : 데이터문장숫자

html >### js

할당(assignment,대입, 저장) : 변수에 값을 저장 =참조(reference) : 변수에 저장된 값을 읽음선언(declaration) : 변수명을 자바스크립트 엔진에 알림변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있다.함수 레벨 스코프로 인해 함수

A==B 같다A!=B 같지 않다A>=B A는 B보다 크거나 같다A<=B A는 B보다 작거나 같다A && B A 이고 B 이다 andA || B A 또는 B 이다 or

button onclick 속성 >## html >## css >## js

HTMLJS

HTMLJS

!codepencalixlock/embed/poxjwNM?default-tab=html%2CresultHTMLCSSJS주로 아래와 같이 짝을 이루어 사용한다.mouseOver <-> mouseOut : 사용 권장 안함mouseEnter <-> mouseLe

!codepencalixlock/embed/vYVLEeb?default-tab=html%2Cresult

!codepencalixlock/embed/rNqxaRd?default-tab=html%2Cresultclass의 유/무를 true/false로 반환

!codepencalixlock/embed/PoyZPNQ?default-tab=html%2CresultJS를 최대한 적게 사용하는 것이 목표

!codepencalixlock/embed/LYgGGZd?default-tab=html%2Cresult

!codepencalixlock/embed/GRYoqyx?default-tab=html%2Cresult

!codepencalixlock/embed/abRdmdy?default-tab=html%2Cresult

!codepencalixlock/embed/eYPJdEW?default-tab=html%2Cresult3차 메뉴 구현 필요

클래스101 - 이벤트!codepencalixlock/embed/dygGpLr?default-tab=html%2Creasul

!codepencalixlock/embed/PoyzVVP?default-tab=html%2Cresult

!codepencalixlock/embed/ExdyMoz?default-tab=html%2Cresult