HTML/CSS 기본

3월부터 6개월간 제로베이스 프론트엔드 스쿨을 수강하게 되었다. 한번도 준비해본 적 없는 코딩테스트를 잘 통과할 수 있을지 모르겠지만 우수수강생 안에 들기위해 열심히 해야겠다(๑╹o╹)φ 강의 내용 다 정리할 순 없어서 새로 알게된 내용, 까먹을 거 같은 내용 위주로

✔blockquote 긴호흡의 문단을 한꺼번에 묶어서 인용할 때 ✔q 문장 중간에 짧게 인용문 넣고 싶을 때 P태그 내에는 blcok요소이면 자동으로 p태그가 닫혀서 blockquote 사용X -> q만 사용가능 ✔pre 고정폭 글꼴을 사용 내부에 있는 내용을 그대

✔div 아무 의미가 없는 컨테이너 태그 block 묶어서 스타일링하거나 특정위치에 배치하고 싶을 때 본인만의 속성X 전역속성만 사용 ✔span 아무 의미가 없는 컨테이너 태그 inline 구문컨텐츠를 담음 (보통 텍스트 꾸밀때) 본인만의 속성X 전역속성만 사용 ✔

✔임베디드 직접 코드를 작성하는 게 아니라 외부에서 소스를 불러와서 웹페이지에 삽입하는 요소 ✔image alt 속성 (alternative) 필수 값은 아니지만 접근성을 올려주는데 중요한 역할을 함 스크린리더가 이미지를 설명할 수 있음 이미지가 깨졌을 때 대체 텍스

✔form 사용자가 정보를 입력할 수 있는 장치를 마련해주는 것 interaction이 들어감 ✔input 사용자가 정보를 입력할 수 있는 영역 한줄만 입력가능 엔터치는 순간 form이 서버로 submit됨 action 속성 목적지의 주소가 들어감 폼 데이터를 받아

name을 꼭 입력해야만 form 데이터 상에서 구분이 가능함예전에 한번이라도 username 이라는 필드를 입력한 적이 있으면 자동으로 후보값 띄워줌autocomplete="on" or "off"disabled가 없으면 name=& 이렇게 값이 없는 상태로 서버로 넘

= dropdown 메뉴, 펼침메뉴option을 자식으로 넣어 여러가지 후보군을 추가할 수 있음옵션의 자식요소로 들어가 있는 텍스트는 사용자에게 ui적으로 보여주는 값이 들어감서버로는 다른 이름으로 보내고 싶다면 value 값에 입력서버로 보낼 때는 name필드랑 va

가능한 선택지를 추천하는select 처럼 내부에 option을 자식요소로 넣음input과 datalist의 연결고리가 없음 -> label의 for속성이 input의 id를 찾아서 보는 것처럼 input의 list속성이 datalist의 id를 보는격select특정값을

html5를 입력하거나 !입력하고 tab 하면 html 문서에 기본 틀 볼 수 있음head에 있는 태그들이 하는 일 - 페이지에 대한 metadata를 포함하는 것데이터를 설명하는 데이터html도 하나의 데이터 이기 때문에 html문서를 설명하는 데이터가 메타데이타브라

고유식별자문서전체에서 서로 겹친 id를 가질 수 없음여러개요소가 공유X공백이 들어갈 수 없음숫자나 특수문자로 시작 X, 영어소문자로 시작O\-(대쉬) 나 \_(언더대쉬) 로 구분가능식별자여러개요소가 공유O클래스이름에 공백X하나의 요소가 여러개의 클래스를 가질 수 있으며

요소 선택자, 태그 셀렉터html 전역속성 id = 이름표이요소 콕 찝어서 설명할수 있는 이름표 달아줄 수 있음유일하고 유니크한 이름동명이인X전체에서 중복없이 딱 하나html 전역속성 class = 이름표중복가능스페이싱을 하면 두개이상의 이름도 사용할 수 있음Attri

더 디테일하고 적은범위를 선택그렇게 고른 애들중에서 콜론 뒤에 있는 조건을 만족하는 요소들앞에 있는 선택자는 태그 선택자 말고도 클래스 가능범위를 좁히는 조건은 여러가지그 요소의 현재 상태그 요소들 중에서 첫번째 자식, 마지막 자식형제 중에서 첫번째 자식ex).movi

동적 가상 선택자 html 요소의 상태에 따라서 변경할 수 있는 동적 가상 선택자 요소는 하난데 사용자의 동작에 따라서 스타일을 변경할 수 있는 것 ex) 어떤 요소위에 마우스를 올리거나, 커서를 클릭해서 포커스를 맞춘다거나 자바스크립트 말고도 css로 만으로 스타일

형제선택자 일반 형제 선택자 결합 (~) 같은 부모를 가진 요소들중에서 본인보다 뒤에있는 형제만 선택가능 ex) 인접 형제 선택자 결합 (+) 본인 바로 뒤에 해당하는 요소가 있으면 스타일 적용 (해당 태그 없으면 적용안됨) ex) 그룹화 여러개를 통일한 스타일을

보통 브라우저에서 기본 글씨크기 디폴트값은 16pxitalic (이탤릭체), oblique 기울임꼴 사용<em>태그는 강조하기 위해 사용하는 것font-style은 스타일적으로 기울여서 보여주고 싶은 것bold(700)100단위 숫자(기본 400)<stron

block요소에 적용 가능첫번째 줄 앞부분 들여쓰기자식에게 상속됨block 요소에만 적용css 단축속성 shorthandunderline, color, style, thickness 순서는 상관없음underlineoverline 글씨 위 줄line-through 글씨

📌 박스모델 크기 width, height 인라인 요소들은 가로,세로 지정해줘도 안먹음 🍍 min-width 최소너비 지정 뷰포트를 아무리 줄여도 min-width 보다는 줄어들지가 않음 반응형사이트를 만들때 유용 min(), max() 보다 더 폭 넓게 사용가능

📌 박스 모델 테두리

none, left, right기본적인 block이나 inline block 계산방법(normal flow)을 무시하고 별로의 배치효과를 가지게 됨부모영역 내에서 가장 왼쪽, 가장 오른쪽으로 이동자리 주위로 다른요소들이 배치 될 수 있음별도의 레이어로 붕 떠서 존재그

불투명도기본값 1 (투명도가 없는 상태)0.0 ~1.0 사이의 값내부에 있는 모든 요소가 투명해짐 (글씨도)background-color에 쓰는 rgba() 에는 글짜는 투명도 조절 안됨(배경색만 조절)color보다 image가 더 앞에 있음image가 있으면 colo

다수의 스타일을 자동으로 재생될 수 있도록 만듬key frame이라는 걸로 애니매이션 세트를 만들어놓고 갖다씀user의 특정 액션에 의해서 스타일 변경됨액션하지 않으면 스타일 변경Xanimation은 user의 액션 없어도 계속 움직임A B C D 로 움직이는 하나의

flexbox는 정렬하고 싶은 것들의 부모에다가 써서 마법을 부림flex box는 1차원 공간에서의 직선 정렬부모와 자식관계에서만 flex 적용가능flex container : 아이템들을 감싸는 부모영역flex item : 내부에 정렬을 위해 담아놓은 아이템들main