programming study/HTML, CSS (12) 썸네일형 리스트형 Flex Layout 본 내용은 10분 테코톡 콜린님의 강의를 토대로 작성하였습니다. 1. Layout HTML, CSS에서 레이아웃이란 문서 위에 상자를 적절한 위치에 배치하는 방법을 의미 nomal flow 브라우저 기본값으로 HTML 페이지를 배치하는 방법 block, inline 두 가지의 방법 존재 nomal flow로만 화면을 구성하는 것에는 한계가 있음 CSS의 적절한 스타일과 레이아웃을 조절하는 방법을 통해 사용자가 정보를 습득하기 편리하 형태로 변경해야 함 block 자신의 부모요소 너비를 전부 차지 새로운 블록을 추가할 시, 다음 라인에 개행되어 추가 inline 컨텐츠 영역만큼만 너비 차지 부모의 최대 너비까지 나란히 위치 부모의 너비를 넘긴 경우, 개행하여 배치 2. Flex 용어 flex 요소들을 행,.. CSS 방법론 본 내용은 10분 테코톡 동동님의 강의를 토대로 작성하였습니다. 1. CSS란? HTML, XML 문서의 스타일을 나타내는 언어 문서의 구조와 스타일을 분리하여 HTML, XML 문서의 각 요소를 꾸미는 것이 역할 2. CSS의 등장 이전과 이후 등장 이전 각 요소의 전용 속성이나 style 속성으로 스타일을 지정 문제점 여러 페이지에 같은 스타일 요소를 적용 시, 그만큼 반복해야 한다. HTML은 본래 문서 구조를 의미하므로 바람직하지 않다. 텍스트 문단 등장 이후 CSS 파일과 HTML 문서를 분리하여 사용 가능 HTML문서에서의 스타일 관련 코드를 분리할 수 있게 됨 여러 페이지에 같은 스타일을 적용시키기 용이 /* p태그의 스타일을 설정 */ p { color: black; font-size: 1.. [드림코딩 by 엘리] HTML 태그 정리 본 내용은 드림코딩 by 엘리님의 강의를 토대로 작성하였습니다. 1. Semantic Tags(Semantic Markup) Semantic: 의미의, 의미가 있는 의미가 있는 Semantic 태그를 적절한 곳에 사용하는 것이 권장된다. 예시) 웹 페이지의 제목을 강조하기 위해서 span 태그를 사용하여 글자 크기를 키우는 것보다, h1태그를 사용 Semantic Tag를 사용하면 좋은 점 SEO: 검색 최적화 Accessibility: 웹 접근성 Maintainability: 유지보수성 2. 웹사이트 구조를 이루는 태그들(박스 태그) div태그를 남발하는 것은 자제 header 태그 웹 사이트 로고 사용자 중요 정보 nav 태그 하위에 여러가지 메뉴가 모여있을 때 footer 태그 웹사이트 하단에 사이.. [코드잇] 반응형 웹 퍼블리싱 (2021.2.19) 본 내용은 해당 강의 토대로 작성 반응형 웹 Responsive Web Design 브라우저 사이즈에 맞춰서 레이아웃이 바뀌는 것 모바일, 태블릿 버전을 만들지 않아도 된다. media query /* 기본 폰트 크기*/ h1 { font-size: 24px; } p { font-size: 16px; } /* 브라우저의 가로길이가 768px을 넘어갈 때 */ @media (min-width: 768px) { h1 { font-size: 36px; } p { font-size: 24px; } } /* 브라우저의 가로길이가 992px을 넘어갈 때 */ @media (min-width: 992px) { h1 { font-size: 48px; } p { font-size: 32px; } } @media를 이용하.. [코드잇] HTML/CSS 핵심개념 (4)(2021.2.18) 본 내용은 해당 강의 토대로 작성 포지셔닝 01. relative 포지션 position 속성 모든 요소는 기본적으로 static이다. 원래 있어야할 위치에 배치 position: relative 상대적인 위치 원래 있어야할 위치를 기준으로 이동한다. top, right, bottom, left margin과 다른점 다른 요소에 영향을 주지 않는다. 이동 후 요소들과 겹칠 수 있다. 예시 b { position: relative; top: 30px } 02. fixed 포지션 브라우저를 기준으로 포지셔닝 top, right, bottom, left 해당 요소를 포지셔닝한 위치에 고정한다. 네비게이션바에 주로 사용 03. absolute 포지션 가장 가까운 포지셔닝이 된 조상(Ancestor) 요소가 기준.. [코드잇] HTML/CSS 핵심개념 (3)(2021.2.18) 본 내용은 해당 강의 토대로 작성 Display 01. display HTML 요소의 레이아웃을 결정하는 가장 중요한 속성 중 하나 display의 종류 모든 요소는 딱 하나의 display 값을 가진다. inline block inline-block flex list-item none 대부분의 요소들은 inline과 block 중 한 가지이다. inline display 다른 요소들과 같은 줄에 머무르려고 하는 성향을 가지고 필요한 만큼의 가로길이만 차지한다. 아래는 기본 diplay값이 inline이다. width, height를 가질 수 없다. span 태그 a 태그 b 태그 i 태그 img 태그 button 태그 block display 다른 요소들과 다른줄에 가려고 하는 성향을 가지고 최대한 많.. [코드잇] HTML/CSS 핵심개념 (2)(2021.2.17) 본 내용은 해당 강의 토대로 작성 CSS 제대로 활용하기 01. 선택자 정리 선택자 : CSS에서 스타일링할 요소 태그 이름 h1 { color: red; } 클래스/아이디 .title { color: red; } #important { color: white; } 자식 (children) 부모 요소의 해당 모든 자식 요소에 스타일 적용 .title span { color: orange; } 직속 자식 (direct children) 부모요소의 해당 직속 자식 요소에만 스타일 적용 .title > span { color: whitesmoke; } 복수 선택 콤마로 구분 .title, #subtitle { color: teal; } 여러 조건 .outside .title { color: white; } 0.. [코드잇] HTML/CSS 핵심개념 (1)(2021.2.17) 본 내용은 해당 강의 토대로 작성 Box Model 01. Box Model 소개 모든 HTML 요소는 Box Model로 이루어져 있다. content : 실제 내용 padding: 내용과 테두리 사이의 여유 공간 border: 테두리 margin: 해당 요소와 다른 요소 사이의 여백 별도의 설정이 없이도 웹 브라우저의 기본 설정 값이 있다. 02. margin, padding padding 설정 padding이 상하좌우 다 같은 경우 하나의 값을 입력하면 된다. 위아래, 좌우로 묶어 지정하려면 순서대로 두 개를 입력하면 된다. element { padding: top right bottom left; } margin 설정 element { margin: top right bottom left; } 가.. 이전 1 2 다음
