프론트엔드 CSS 프로그래밍 기초

CSS 프로젝트


**[STS 122] CSS 프로그래밍 기초** 프로젝트 입니다. 배운내용을 종합적으로 응용해 실제 사용할 수 있는 형태로 기능을 구현하는 과정을 단계별로 살펴보게 됩니다. - 프로젝트-1: [포탈 메인 화면 만들기](#m1) - 프로젝트-2: [게시판 만들기](#m2) ---

### 01. 박스 모델 본 예제에서는 박스 모델의 이해를 도울 수 있는 사이트를 제작해봅니다. ### step-1> 구조 분석 아래와 같은 페이지를 제작하기 전에 페이지의 구조를 분석합니다. - 가장 상단에 위치한 'Hello World'라고 적힌 `

` 박스 - `
` 태그로 이루어진 `box1` - `
` 태그로 이루어진 `box2` - box2의 내부 : ``태그로 이루어진 `<box3>` 및 `<span>`태그로 이루어진 `<btn>` 버튼 <img class="img-shadow" alt="proj_1-1" src="img/css_project01_1.PNG" width="80%"> ### step-2> HTML 기본 구조 작성 기본적인 구조를 잡기위해 html을 이용하여 아래와 같이 코드를 작성합니다. - `<h1>`태그 아래 `<div>`태그를 사용하여 두 개의 박스를 만들어줍니다. - 각각은 box1, box2라는 class 이름을 지정합니다. - box2 안에는 코드를 그대로 출력해주는 `<xmp>`태그를 이용하여 box3과 `<span>`태그를 이용하여 버튼(btn)을 만들어줍니다. ```html <H1>Hello World</H1> <div class="box1"> </div> <p></p> <div class="box2"> <xmp class="box3">
``` ### step-3> 내용 작성 내용을 채워넣기 위해 아래와 같이 코드를 작성합니다. - box1의 내용의 경우 `Lorem`이라 작성 후 엔터 혹은 Tab키를 누를 경우 자동적으로 텍스트가 작성됩니다. ```html

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

<h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>
Try it Yourself >>
``` ### step-4> h1 스타일 추가 h1 태그에 스타일을 추가하기 위해 아래와 같이 코드를 입력합니다. - text-align : 텍스트의 정렬 방향을 의미하는 속성입니다. 값으로 `centet`을 주어 중앙 정렬를 합니다. - background-color : 배경 색을 지정하는 속성입니다. - color : 글자 색을 지정하는 속성입니다. ```css h1 { background-color: dodgerblue; color: white; text-align: center; } ``` ### step-5> box1 스타일 추가 box1에 스타일을 추가하기 위해 아래와 같이 코드를 입력합니다. - .box1 : 클래스명인 box1을 선택자로 선택합니다. 클래스를 선택자로 사용할 경우 `.클래스명`과 같이 사용합니다. - padding : 안쪽 여백을 의미합니다. 보기 좋은 박스를 만들기위해 아래와 같이 적절한 여백 값을 부여하여, 텍스트와 박스 사이에 간격이 생기도록 합니다. ```css .box1 { background-color: tomato; color: white; padding: 30px 30px; } ``` ### step-6> box2 스타일 추가 선택자로서 클래스명 box2를 선택하여 스타일을 추가하기 위해 아래와 같이 코드를 입력합니다. 배경색을 변경하고 패딩값을 주어 텍스트를 둘러싼 박스에 안쪽 여백을 부여합니다. - 색상과 관련된 속성의 값으로 rgb색상을 이용할 수 있습니다. ```css .box2 { background-color:rgb(238, 234, 234); padding: 2px 15px 15px 15px; } ``` ### step-7> box3 스타일 추가 선택자로서 클래스명 box3을 선택하여 스타일을 추가하기 위해 아래와 같이 코드를 입려합니다. 배경색을 하얀색으로 변경하고 패딩값을 주어 텍스트를 둘러싼 박스에 안쪽 여백을 부여합니다. - border-left : border은 테두리를 설정하는 속성입니다. boder-left는 왼쪽 테두리를 의미하며, `5px solid limegreen`은 각각 테두리 굵기, 실선 테두리, 테두리의 색상을 의미합니다. ```css .box3 { background-color:white; padding: 5px 5px; border-left: 5px solid limegreen; } ``` ### step-8> 버튼 스타일 추가 버튼의 스타일을 추가하기 위해 아래와 같이 코드를 입력합니다. 버튼을 선택하기위해 클래스 명 `.btn`을 선택자로 하여, 배경색과 글자색의 스타일을 변경하고 패딩값을 적용하여줍니다. - 색상과 관련된 속성의 값으로 `#FFFFFF`, `#000`등의 16진수 색상코드를 이용할 수 있습니다. ```css .btn { background-color:#4CAF50; color: white; padding: 8px 16px; } ``` ### step-9> 전체적인 크기 조정 전체적인 크기를 조절하기 위한 스타일을 적용하기위해 아래와 같이 코드를 입력합니다. - body : 전체적인 변경을 위하여 모든 태그를 감싸고 있는 ``태그를 선택자로 두어 스타일을 지정합니다. - width : 너비를 설정하는 속성입니다. 기본적으로 전체 화면의 너비만큼의 크기를 가지게 됩니다. 값을 80%정도로 부여하여 전체 화면의 80% 정도의 너비를 가지도록하여 좌우에 적당한 여백을 가지도록 합니다. - margin : 바깥쪽 여백을 의미합니다. margin을 auto로 설정하여 중앙에 위치하도록 할 수 있습니다. ```css body { width: 80%; margin: auto; } ``` ### step-10> 실행결과 확인 브라우저에서 실행결과를 확인 합니다. proj_1-2 ---

### 2. 레이아웃 본 예제에서는 기본적인 레이아웃 틀을 구성하는 방법을 알아봅니다. 레이아웃에 대해 이해하고 `header`와 `nav` 및 `section`으로 화면을 구성해 봅니다. ### step-1> 레이아웃 아래 이미지는 본 예제에서 최종적으로 만들고자하는 사이트입니다. - header와 nav 및 3개의 section으로 이루어져 있습니다. - 웹페이지의 서로다른 부분을 정의하는 시멘틱 요소들을 사용합니다. - 시멘틱 요소에서 `
`는 문서 또는 섹션의 머리글을 정의합니다. - 시멘틱 요소에서 `