CSS

🎨CSS 개요, CSS 선택자 1 CSS (Cascading Style Sheets) : 마크업 언어(HTML)이 실제로 화면에 표시되는 방법(모양, 색상, 크기, 스타일 ...)을 기술하는 언어 (== HTML 코드가 화면에 어떤 스타일로 보여질지 지정하는 것)

🎨CSS 선택자 2 CSS 파일 연결하기 `` : 외부에 있는 파일과 연결하는 태그 CSS 파일은 파일 전체가 태그 내부라고 생각하면 됨 rel : 어떤 시트를 연결하는 지 기본 속성 선택자 태그에 작성된 특정 속성을 선택하는 선택자 ⭐작성법⭐ 선택자[속성명="속

CSS 선택자 3 문자열 속성 선택자 : 속성값의 문자열을 확인하여 스타일은 적용하는 방식의 선택자 1) 선택자[속성명 ~="특정값"] {css 코드 ; } -> 띄어쓰기로 구분되어 있는 여러 속성 값이 작성된 속성 중 속성값이 특정 값을 단어로 포함하는 요소를 선택

CSS 선택자 4 🧏‍♀️일반 구조 선택자 형제 관계에 있는 요소 중 특정 요소를 선택하는 선택자 위치를 기준으로 구분함 > :first-child :last-child :nth-child(수열) :nth-last-child(수열) 뒤에 선택자가 먼저 해석된다 예

CSS 선택자 4 🧏‍♀️일반 구조 선택자 형제 관계에 있는 요소 중 특정 요소를 선택하는 선택자 위치를 기준으로 구분함 > :first-child :last-child :nth-child(수열) :nth-last-child(수열) 뒤에 선택자가 먼저 해석된다 예

특정 요소의 자식이 하나밖에 없을 때 선택💡 전체 중에 하나여야 한다➡️ <p>가 아니라 <pre> 등 다른 태그여도 자식 요소가 1개 이상이면 선택되지 않는다특정 요소의 자식 중 지정한 형태와 같은 자식 요소가 하나만 있을 때 선택💡 자식 수와 상관없이

기본적으로 css 속성은 style태그 또는 css 파일에 작성된 순서대로 (위➡️아래) 해석이 진행되지만같은 요소에 여러 css 속성이 설정되는 경우 우선 순위가 적용된다.알아둬야 할 것1) 동일한 우선 순위로 css 속성이 설정된 경우➡️ 제일 마지막에 작성된 cs

CSS 레이아웃 스타일 1 레이아웃 (layout) 사전적 의미 : 배치, 정리 기술적 의미 : 구성 요소를 제한된 공간에 효율적으로 배치하는 것을 의미 화면 배치 방법(형식) : display 속성 요소가 화면에 어떻게 보여질지 형식을 지정하는 속성 > - blo

레이아웃 스타일 2 요소의 영역(여백) 관련 속성 HTML 요소는 총 4가지 영역으로 구성되어 있다. > 1. content 영역 요소의 내용이 작성되는 영역 (시작태그와 종료태그 사이에 작성되는 내용을 생각하면 됨) padding 영역 conten

레이아웃 스타일 3 배치 관련 스타일 (position) position : relative; (상대적인) 지정된 요소 내부에 다른 요소가 상대적인 위치를 지정할 수 있도록 기준이 되게 만드는 속성. 내부에 작성되는 요소에 위치 지정 시 top, bottom, left

Flexbox > Flexbox를 이용할 때 반드시 알아야 하는 것! Flexbox의 구성 flex-container : 정렬이 필요한 요소를 감싸는 요소 (부모) item: 정렬을 적용할 요소 (자식) (flex-container와 item에 사용되는 flex 관련

글자 관련 스타일 color : 글자 색을 지정하는 속성 선택자 { color : 색상명(영문) | 16진수 숫자 RGB(#fff, #ffffff) | rgb(255, 255, 255) | rgba(25

transform : 변형과 관련된 속성CSS 속성 작성 시 크로스 브라우저 (브라우저가 달라지는 경우) 처리 방법\-ms- : 마이크로 소프트 (익스플로어, 엣지)\-webkit- : 크롬, 사파리\-o- :오페라\-moz- : 파이어폭스예시1예시2💡 transit

시맨택 태그 시맨틱 (Semantic) : 의미 기존 영역 분할에 주로 사용된던 div, span 등의 태그는 태그 이름만 봤을 때 나눈다는 것 이외의 의미를 파악할 수 없음 -> 태그만 봤을 때 태그의 목적을 알 수 없어 id 또는 class를 반드시 추가해야 했다

YOUTUBE 화면 구현 목표 HTML CSS 결과 아쉬운 점 Java script를 배우지 않아 아직 심화적인 기능이 없다 코드가 왔다갔다하며 지저분한 느낌이 든다. -> 연습해서 조금 더 깔끔하게 구현하기!

NETFLIX HTML CSS