HTML CSS (20) 썸네일형 리스트형 html/css) 박스모델이란 css 박스 모델 html 요소를 네모난 상자들로 표현하는 모델 content 예제) body> div class="box">div 태그 박스 모델div> div>div태그2div> div> pre> 요소 크기 계산해보기 전체 너비 = width + 좌우패딩 + 좌우보더 + 좌우마진 전체 높이 = height + 상하패딩 + 상하보더 + 상하마진 박스 모델 크기를 계산하는 기준 box-sizing: content-box 기준(기본값) width: 200px 값을 준다면 컨텐츠만 지정되는 개념 pre> div> body> 전체 스타일 정의 .. html/css) css선택자 - 속성선택자 css 선택자란 (5.28)https://notion6780.tistory.com/92 html/css) css 선택자 selector⭐css 선택자는 html 문서에서 스타일을 적용하고 싶은 특정 요소를 선택하는 도구다. css로 html 문서를 렌더링하려면 각 부분을 선택할 수 있어야 한다. 선택자는 html에 "이 요소에 스타일을 입히notion6780.tistory.com 앞서 css선택자의 개념을 짚었다.여기에 속성선택자의 사용법을 적어본다. ⭐속성선택자 html 요소의 속성이나 속성값을 보고 대상을 구분한다.태그 이름이나 클래스, id 대신 요소의 속성을 본다. 문법대괄호([])를 사용속성 이름만 쓰거나 속성값과 매칭시켜 선택 예제)다음 html 구문의 스타일을 정의body> input .. html/css) css선택자 - 가상클래스 선택자 css 선택자란 (5.28)https://notion6780.tistory.com/92 html/css) css 선택자 selector⭐css 선택자는 html 문서에서 스타일을 적용하고 싶은 특정 요소를 선택하는 도구다. css로 html 문서를 렌더링하려면 각 부분을 선택할 수 있어야 한다. 선택자는 html에 "이 요소에 스타일을 입히notion6780.tistory.com 앞서 css선택자의 개념을 짚었다.여기에 가상클래스 선택자의 사용법을 적어본다. ⭐가상클래스 선택자요소의 특정상태나 위치 기준으로 스타일 정의 어떤 상황이나 조건에 있는 요소를 구분한다 문법선택자 뒤에 콜론(:)을 붙인 뒤 다음과 같은 가상클래스를 붙인다.✨ hover 마우스오버 ✨ focus 입력창선택 ✨ first-child.. html/css) css선택자 - 결합선택자 css선택자란 (5.28)https://notion6780.tistory.com/92 html/css) css 선택자 selector⭐css 선택자는 html 문서에서 스타일을 적용하고 싶은 특정 요소를 선택하는 도구다. css로 html 문서를 렌더링하려면 각 부분을 선택할 수 있어야 한다. 선택자는 html에 "이 요소에 스타일을 입히notion6780.tistory.com 앞서 css선택자의 개념을 짚었다.여기에 결합선택자의 사용법을 적어본다. 결합선택자 여러 선택자를 조합해서 더 구체적으로 대상을 선택 위치와 관계까지 고려한 개념 how 두개 이상의 선택자를 기호로 연결해 사용한다. ✨ 하위선택자 (공백)✨ 자식선택자 (>)✨ 인접형제선택자 (+)✨ 일반형제선택자 (~)하위 선택자(자손선택자) .. html/css) css선택자 - 기본선택자 css 선택자란 (5.28)https://notion6780.tistory.com/92 html/css) css 선택자 selector⭐css 선택자는 html 문서에서 스타일을 적용하고 싶은 특정 요소를 선택하는 도구다. css로 html 문서를 렌더링하려면 각 부분을 선택할 수 있어야 한다. 선택자는 html에 "이 요소에 스타일을 입히notion6780.tistory.com 앞서 css선택자의 개념을 짚었다.여기에 주요 기본선택자의 종류와 사용법을 적어본다. ✨전체선택자 (*)✨ 태그선택자 (tag)✨ 클래스선택자 (.class)✨ 아이디선택자 (#id) 1.전체선택자모든 요소를 한꺼번에 선택주로 초기화 작업에 사용된다.* { margin: 0; padding: 0;} 2.태그선택자htm.. html/css) css에서 사용하는 주요 단위 px 픽셀 ppi 픽셀퍼인치 % 퍼센트html 구성요소의 크기를웹페이지 높이와 너비를 기준으로 결정할 수 있도로 한다.em 부모요소의 폰트사이즈를 기준으로 상대크기 계산.. 중첩된다.rem root 폰트사이즈를 기준으로 상대크기 계산 hex 16진수 색상표 #rrggbb ex) #8a2be2: 보라색 rgb(rrr, ggg, bbb) ex) rgb(138, 43, 266)style> html { background-color: green; } .box1 { text-align: center; font-weight: 800; font-size: 4em; background-color: red; /* 현재.. html/css) css 선택자 selector ⭐css 선택자는 html 문서에서 스타일을 적용하고 싶은 특정 요소를 선택하는 도구다. css로 html 문서를 렌더링하려면 각 부분을 선택할 수 있어야 한다. 선택자는 html에 "이 요소에 스타일을 입히고 싶어요"라고 알려준다. 👍css선택자는 웹 페이지의 디자인과 레이아웃을 제어하는 첫 단계라고 할 수 있다. ✨ 기본선택자 https://notion6780.tistory.com/97✨ 결합선택자 https://notion6780.tistory.com/98✨ 가상클래스 선택자 https://notion6780.tistory.com/99✨ 속성선택자 등이 있다. https://notion6780.tistory.com/100 문법 a { background-color: yellow; }head> .. html/css) 시멘틱 태그 semantic tag ⭐시맨틱 태그semantic tag시맨틱 웹 단순표시를 넘어 데이터가 의미를 가지도록 만드는 철학 기존 논시멘틱 웹구조는 기계가 이해할 수 없다. 시멘틱웹운 메타데이터를 추가해 기계도 이해하고 처리할 수 있게 돕는다. 비시멘틱의 div, span 등은 아무 의미가 없는 단순 구조적 용도를 가진다. 하지만 시멘틱의 article, section은 의미를 가진다. 로고, 제목 등을 포함 --> header style="background-color: bisque;"> h1>나의 블로그h1> p>여러분 환영한다p> header> nav> ul> li>a href="홈">a>li> li>a href="소개">a>li> .. 이전 1 2 3 다음
