목록HTML & CSS (38)

Simple Is Best

6. 레이아웃 방법 - 2. display : inline-block

이전 포스팅에서는 레이아웃을 위해서 float : left를 사용하였다. 본 포스팅에서는 modern-web에 더욱 적합한 display : inline-block; 에 대해서 알아보겠다. display : inline-block ▶ inline (글자 특성) + block (박스 특성) 을 동시에 갖는다. 1. inline-block 을 설정하게 되면 left 영역 오른쪽에 right 영역이 글자처럼 착 달라붙는다. 2. inline-block 은 글자특성을 가지기 때문에 space bar 혹은 enter에 매우 민감 HTML ▶ display: inline-block 은 공백에 민감하기 때문에 태그가 띄워지고 width가 부모 태그보다 넘어가면 다음 칸으로 넘어간다. ▶ 따라서, left 와 righ..
HTML & CSS 2021. 7. 2. 15:54
5. 레이아웃 방법 - 1. float

본격적인 웹사이트 화면 구축을 위한 단계이다. 웹사이트에 들어가게 되면 다음과 같은 모양의 사이트를 더러 볼 수 있다. 맨위 : Header 왼쪽 : Side Bar (left) 오른쪽 : Main (right) 맨 아래 : Footer 다음과 같은 레이아웃을 만들기 위해서는 여러가지 방법이 존재한다. 본 포스팅에서는 float을 다룬다. HTML 여러가지 박스(div)를 만들기 전, 모든 div태그를 감쌀 수 있는 container 혹은 wrap이 필요하다. CSS .container { /* 가장 부모 태그, 모든 태그를 포함한다. */ width : 800px; } .header { width : 100%; /* 부모 박스로 부터 100% */ height : 50px; background-colo..
HTML & CSS 2021. 7. 2. 14:19
4. div 태그

: 네모 박스 But! 쌩 div 태그는 그냥 '1차원 선' 위의 사진에서 파란색 BOX는 div 태그를 활용 HTML 프론트엔드 개발자 김XX CSS .box { display: block; /* display : block -> 한 행을 전부 차지해 주세요(해당 태그를 모두 박스로써 다뤄주세요) div는 박스이기 때문에 display :block 이 내장되어 있어서 지워도 무방하다. */ margin-left : auto; /* 오른쪽 정렬 */ margin-right : auto; /* 왼쪽 정렬 */ width : 400px; background-color: blue; padding : 30px; border : 1px solid black; text-align: center; color : wh..
HTML & CSS 2021. 7. 2. 13:13
3. CSS 파일에서 스타일링

이전 포스팅에서는 HTML 태그 내에서 간단히 스타일링 하는 방법에 대해서 알아보았다. HTML 내의 style 속성을 활용하면 스타일링이 직관적이지 못하고 수정이 불편하다. 본 게시글에서는 CSS 파일을 활용하여 스타일링을 진행한다. 1. HTML 의 태그에 위의 코드를 추가한다. rel 속성 : 파일의 종류 href 속성 : css의 파일 경로 2. 이전 시간에 style 속성에서 적용했던 스타일들을 클래스를 작성해서 옮긴다. (CSS 파일 내) .profile { width: 10%; display:block; margin:auto; } 3. HTML 파일 내에 적용할 태그 내에 클래스 명을 붙여준다. 2번 과정에서 .을 갑자기 왜 붙이는 거지? HTML 태그를 선택하기 위해! CSS Selecto..
HTML & CSS 2021. 7. 2. 12:09
2. style = "스타일 명령"

CSS파일 내에서 스타일링 하는 것이 아닌 HTML 태그 내의 style 속성을 활용한 간단한 스타일링을 하는 방법 정리 이미지태그를 활용하여 웹사이트 내에 이미지를 띄워보자! 망한 거 같은데....? 수정 요구 사안 1. 이미지의 사이즈 조절 2. 사이트 내의 이미지 배치 (가운데 정렬) 1. 이미지의 사이즈 조절 ☞ 이미지의 사이즈를 조절하는 방법 1. px 단위 : 절대적 단위 2. % 단위 : 상위 태그의 몇 %를 차지하는 지? (상대적 단위) 2. 이미지의 가운데 정렬 (3가지 암기) display : border; margin-left : auto; margin-right : auto; margin-left: auto; margin-right : auto; ☞ margin : auto (완전히..
HTML & CSS 2021. 7. 2. 11:26
1. HTML 기본 골격 및 필수 태그와 속성

HMTL 기본 골격 필수 태그 모음 태그 구성 요소 1. 태그 명 2. 속성 명 : 해당 태그에 적용할 속성, 태그별로 속성이 정해져 있다. 글 본문 글 제목 링크 버튼 리스트 리스트 1. : paragragh, 본문 내용 작성 2. ~ : heading, 제목을 작성할 때 사용하는 태그 (h1: Big Size, h5: Small Size) 3. : 이미지 사용 태그 ☞ 속성 : src='이미지 위치 경로' 4. : anchor, 닻, 글자 클릭했을 때 지정 사이트 이동 ☞ 속성 : href='이동할 사이트 URL' 5. : 버튼 생성 태그 6. : unordered list, 순서 없는 리스트 생성 7. : ordered list, 순서 있는 리스트 생성 ☞ 과 은 자식 태그로 태그를 가진다. 응용 ..
HTML & CSS 2021. 7. 2. 11:02
이전 Prev 1 2 3 4 5 Next 다음