HTML & CSS (16) 썸네일형 리스트형 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 >> .. 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 기초 - 적용 방법 및 선택자, 주요 속성" ) 참조 1-1) element 위치 조절하는 방법 1-1-1) display: inline-block; 태그는 기본적으로 block 속성을 가지고 있다. 그렇기 때문에 태그 안에서 콘텐츠를 정렬하.. 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 기본 문법 - , head 태그는 데이터를 저장하거나 rendering되는 것 이외의 내용을 작업하는 공간이다. >> title 태그와 같이 head 태그 내부에 속해있는 자식 태그들은 웹 브라우저 화면에 rendering되지 않음 head 태그는 브라우저 화면에 rendering하는 것이 아닌 rendering을 하기 위한 정보를 세팅하는 영역이라고 볼 수 있다. head 태그 안에 추가되는 부분으로 title 태그가 존재한다. 이때, title 태그는 웹 페이지를 열었을 때 tab에 제목을 저장해 주는 공간(주소창 위의 제목에 해당)이다. ~ body 태그의 경우, 웹 브라우저 화면에 보여지는 것들을 작업하는 공간이다. 즉, ~ 사이에 들어가는 내용들이 renderi.. 이전 1 2 다음
