노트

flex속성은 flex컨테이너와 flex아이템을 정의하고유연한 레이아웃을 구성할 수 있게 해주는 속성이다. 📌 예시 HTML item1 item2 item3 📌 CSS.box1,.box2,.box3{ width: 100px; height: 100px; border: 1px solid black;} 📌 출력형태위 출력형태와 같이 웹페이지는 기본적으로 요소들이 수직 방향으로 쌓이는 구조.다양한 레이아웃을 구성하기 위해서는 요소들의 정렬 방향을 자유롭게 변경할 수 있어야 한다.이러한 문제를 해결해 주는 속성이 바로 flex 속성 1. display: flex;부모 요소에 display: flex; 를 사용하면자식 요소는 자동으로 flex아이템으로 정의된다...

CSS 문서 구조 관련 선택자에 대한 학습 1. 관계도 예시 구조 부모의 자식이자 조상의 자손 섹션의 자식이자 조상의 자손 부모와 섹션의 형제 부모와 섹션의 형제 2. 관계도 총정리용어의미선택자비고조상 Ancestor상위 요소 전부❌직접 선택 불가부모 Parent바로 위 요소>직계 한 단계만자식 Child바로 아래 요소> 자손 Descendant아래 요소 전부공백모든 하위 요소형제(인접) Adjacent sibling같은 부모, 바로 뒤+하나의 요소만형제(일반) General sibling같은 부모, 뒤에 있는 형제 전부~여러 요소 가능 3. 선택자📌 예시 HTML I'..

CSS의 기본여백을 주는 속성인 margin 과 padding 1. margin과 padding의 차이 margin 과 padding 은 테두리를 기준으로 나뉘는데, margin 은 요소의 바깥쪽 여백을, padding 은 태두리와 콘텐츠 사이의 여백 즉, 안쪽 여백을 설정한다. 또한, margin 은 너비가 지정되어 있다는 가정하에가운데 정렬이 가능하다. 2. margin사용📌예시 HTML margin box box 속성값 1개 📌CSS.box1{ background-color: lightpink; width: 100px; height: 100px; border: 1px solid black; margin: 20px; /* 모든 ..

처음 코딩을 하면서 많이 헷갈리는 부분인✔️id속성과 class속성의 차이 이해하기 1. id속성 id 속성은 쉽게 말하면 개인이다. 내 주민등록번호를 남이 쓰면 안 되는 것처럼,같은 id값을 가진 요소가 두 개 이상 존재 해서는 안 된다!!특정 요소 하나만을 고유하게 식별하기 위한 용도이기에 '고유 식별자'라고 불리며,이 고유 식별자는 중복 사용이 불가능하다. 즉, 이런 것 ↑ 2. class속성 class 속성은 단체라고 이해하면 편하다. 여러 요소에 같은 class 속성값을 부여하면그 class 속성값을 부여받은 요소들은 같은 그룹으로 묶인다. 여러 요소에 동일한 스타일을 적용하거나,비슷한 성격의 요소들을 그룹화할 때 사용된다.즉, 이런 것 ↑ 3. CSS에서의 사용선택자..

1. CSS 스타일시트란? CSS ( Cascading Style Sheets )는 웹페이지의 디자인을 정의하는 언어로,흔히 '스타일시트'라고 불린다. HTML이 뼈대라면 CSS는 그 위에 올라가는 근육과 피부라고 할 수 있다.사용자에게 더 편안하고 보기 좋은 화면을 제공하는 것이 CSS의 역할. 2. 스타일시트의 종류 CSS 종류에는 인라인 스타일 , 내부 스타일시트 , 외부 스타일시트 총 3가지가 있다. 인라인 스타일HTML 요소에 직접 style 속성을 사용하여 스타일을 지정하는 방식📌 예시와 출력 형태 인라인 스타일시트 적용 이렇게 HTML 요소에 직접 지정하여 사용유지보수가 어렵고 코드가 지저분해지기 때문에,한두 개의 요소를 수정할 경우에만 사용한다. 일종의 테스트용으로만 사..