HTML & CSS/HTML & CSS(2022 version) (11) 썸네일형 리스트형 HTML & CSS 실습(3) - 로그인 form, menu, media query 1) 로그인 form 1-1) display: flex; 1-2) form 태그 1-3) 로그인 form 구현 2) menu 2-1) 가상 선택자 2-2) menu 구현 3) media query 4) 코드 실습 1) 로그인 form 1-1) display: flex; display: flex;를 적용할 시 두 가지 축이 있는데, 하나는 중심축(main axis)이고 다른 하나는 반대축(cross axis)이다. 그리고 이 축은 수평 방향이냐 수직 방향이냐에 따라 바뀔 수 있다. flex-direction: row / column / row-reverse / column-reverse ; → 아이템들(자식 element의 영역)의 정렬을 row 방향( inline 속성과 동일하다고 이해하면 됨 )으로 하.. HTML & CSS 실습 및 추가 skill(2) 1) display: flex; 2) 추가 skill 2-1) 속성 선택자 ~ 2-2) !important 2-3) class 여러 개 지정 2-4) input: focus{} 3) tab menu 4) 게시판 5) layer popup 1) display: flex; 이번에는 앞서 자주 사용한 float 속성의 여러 기술적 이슈들을 보완함과 동시에 더 사용이 편리한 display:flex;에 대해 알아보도록 하자. 지금까지는 레이아웃을 구성할 때 주로 position과 float을 이용하여 구성하였다. 혹은 부모, 자식 관계에 있는 element의 경우, 아래와 같이 부모 element에 padding을, 자식 element에 margin을 부여하여 콘텐츠들을 정렬하였다. display: flex; 적.. HTML & CSS 실습 및 추가 skill 1) CSS 복습 1-1) CSS 적용 방법 1-2) element 위치 조절하는 방법 1-3) 추가 속성 체크 2) 추가 skill 2-1) 속성 선택자 2-2) input[id=" "]:checked { } 2-3) display: none; 2-4) 인접 접근자 + 2-5) :nth-child() 2-6) name 속성 2-7) checked="checked" 2-8) transform / transition 3) 햄버거 메뉴 4) 코드 실습 1) CSS 복습 1-1) CSS 적용 방법 head 영역에 style 태그 추가 inline style link 태그를 이용해 외부 파일 연결 (>> 대부분의 개발자가 가장 일반적으로 많이 쓰는 방법) >> 각 방법별 세부사항은 이전 블로그 글( "CSS 기.. CSS 복습(2) - 위치 조절 방법 및 기타 사항 1) CSS 기초 1-1) element 위치 조절하는 방법 1-1-1) display: inline-block; 1-1-2) float 속성 1-1-3) position 속성 1-2) 기타 2) 연습 코드 1) CSS 기초 (재강조!!) CSS 적용 방법 head 영역에 style 태그 추가 inline style link 태그를 이용해 외부 파일 연결 (>> 대부분의 개발자가 가장 일반적으로 많이 쓰는 방법) >> 각 방법별 세부사항은 이전 블로그 글( "CSS 기초 - 적용 방법 및 선택자, 주요 속성" ) 참조 +) 이미지 파일: gif, jpg, png, svg 비트맵 이미지(dot 찍는 것): gif, jpg, png >> 투명도가 가능함!! 백터 이미지: svg >> 파일 사이즈가 크기에 자.. CSS 복습 - 적용 방법 및 선택자, 주요 속성 1) CSS 기초 1-1) CSS를 사용하는 이유 1-2) CSS 특징 1-3) CSS 적용 방법 1-3-1) head 영역에 style 태그 추가 1-3-2) inline style 1-3-3) link 태그를 이용해 외부 파일 연결 1-4) CSS 선택자 1-5) CSS 주요 속성 1-5-1) backgruoud-color 1-5-2) width 와 height 1-5-3) font-size 1-5-4) margin 1-5-5) padding 1-6) block, inline, inline-block 2) 연습 코드 1) CSS 기초 Cascading Style Sheets(CSS)는 마크업을 디자인하기 위해 작성돤 언어이다. CSS 역할: CSS는 기본적으로 HTML을 꾸며주는 역할을 하는데 이는 .. HTML 복습 - 개념 및 기본 문법, 자주 쓰이는 태그/속성 1) HTML 개념 2) HTML 기본 문법 2-1) html, head, body 태그 2-2) 안에서 자주 쓰이는 태그 ~ / , / 2-3) HTML 태그의 속성 3) 연습 코드 0) 컴퓨터 기초 컴퓨터는 왜 2진수(0, 1로만 표현하는 것)를 사용하는가? 컴퓨터는 손가락이 2개라서 2진수를 사용함 마치 사람이 손가락이 10개라서 10진수(0 ~ 9 표현)를 사용하는 것처럼 이와 더불어 많이 사용되는 것이 8진수, 16진수인데 이 중 16진수를 사용하는 이유는 자릿수 때문임!! 실제로 사람이 인위적으로 만든 숫자가 16진수임(0 ~ 9 + a ~ f) >> 이는 2진수를 16진수로 변환하는 것이 쉽기 때문임 >> ○○○○ => 2진수의 경우, 이와 같이 자릿수가 네 자리면 2의 4제곱(16)의 경우.. HTML & CSS 실습(2) - 레이아웃 체크 및 코드 리뷰 1) 코드 레이아웃 1-1) 영역 구분 및 체크 2) 코드 실습 1) 코드 레이아웃 1-1) 영역 구분 및 체크 (1) header 영역 h1 → 아카데미 로고 영역 div( id="gnb" ) → header의 메뉴 영역( 학교소개, 교육과정, 취업정보, 커뮤니티, 상담신청 ) (2) visual 영역 img → visual 영역 전체에 이미지를 넣는 파트 (3) contents 영역 div( id="left", id="right", id="bottom" ) → id를 기준으로 총 3개 영역으로 구분 div( id="left" ) → ul( id="lecture" ) / li( class="con1 ~ con8" )로 구분 >> 총 8개 block 영역( 게임 기획 ~ 상담/문의 ) div( id="r.. HTML & CSS 실습 - 추가 속성 체크 및 실습 1) CSS 복습 1-1) CSS 적용 방법 1-2) element 위치 조절하는 방법 1-3) 추가 속성 체크 2) 코드 실습 1) CSS 복습 1-1) CSS 적용 방법 head 영역에 style 태그 추가 inline style link 태그를 이용해 외부 파일 연결 (>> 대부분의 개발자가 가장 일반적으로 많이 쓰는 방법) >> 각 방법별 세부사항은 이전 블로그 글( "CSS 기초 - 적용 방법 및 선택자, 주요 속성" ) 참조 1-2) element 위치 조절하는 방법 display: inline-block; float 속성: left, right position 속성: relative, absolute, fixed >> top / right / bottom / left / z-index >> .. 이전 1 2 다음
