결과 스크린샷! 첨부한 html 파일을 크롬브라우저로 열어보세요!
제 첨부파일을 에디터(sublime Text/VScode)로 열어보면 소스코드와 내용 다 볼 수 있습니다.
사진은 html파일과 같은 폴더에 있어야지 보일것입니다.(상대경로로 설정했기 때문!)
상단에 탭바에 있는 html5 , CSS3 , PHP 메뉴 위에 마우스를 올려보세요!
메뉴블럭이 검은색으로 변하고 글자색이 바뀔겁니다. (CSS3 위에 마우스를 올려놓은 상태)
카테고리, 최근 글등 사이드 바도 추가된게 보입니다.
잘봤나용??
CSS style이 없으면 밑에 사진처럼 나오겠죠??
이 프로젝트는 CSS를 이용한 프로젝트니까 기초는 제 첫 포스트 먼저 보고 오세요!!
이것이 css의 속성들인데요, 아래는 css의 문법이예요
선택자, 속성 , 값으로 문법이 완성되는데요, 선택자는 태그 이름, id이름 , class 이름으로 구분할 수 있습니다.
만약에 태그 이름으로 선택하면 문서의 수많은 태그가 중복선택돼서 개별로 상세한 스타일을 적용 못하겠죠?
그래서 id, class로 설정하는데, class="name"인 태그를 선택하려면 [ .name{속성:값} ]으로 하면되고,
id="name"인 태그를 선택하려면 [ #name{속성:값} ]으로 해주면 선택자에 해당되는 모든 태그에 대해 설정해줄수 있습니다.
이번 실습을 위해 알아야할 기본 태그들
1. a 태그는 하이퍼 링크 태그인데, herf = "주소" 형식으로 주소를 추가해줍니다.
2. div 태그는 웹페이지에서 논리적 구분을 정의하는 태그입니다. div 태그를 사용하여 각각의 블록(공간)을 알맞게 할당하고 배치할 수 있습니다. span과 차이점은 한줄 전체를 할당한다는겁니다.
여러항목들을 div 태그로 감싸게 되면 그 여러 항목들이 각각 공간을 할당하게 됩니다.
body의 형식
body의 형식도 정해줄것인데요, 첫번째 사진처럼 제목(header) , 탭바(navigation) , 내용(content)으로 나눠서 작성해줄건데요, 이 세부분을 나눠야 되기 때문에 각 내용을들 div태그로 공간을 할당해주겠습니다.
content 부분에는 메인섹션과 사이드(aside) 부분으로 나눠줄건데, CSS 없이는 위부터 아래로 쭉 차례대로 메인섹션과 aside가 출력이 될것입니다. 어떻게 하면 아래가 아니라 옆에 붙을 수 있을까요?
CSS3의 정렬기능 float를 이용해서 메인섹션과 사이드를 옆으로 정렬시키면 사이드가 옆으로 오게 되겠죠.
정렬을 안하게 되면 위부터 아래로 차례대로 출력이 됩니다.
float : left 를 쓰면 선택자에 해당되는 태그들이 왼쪽에서부터 오른쪽으로 차례대로 출력이 됩니다.
float : right 를 쓰면 선택자에 해당되는 태그들이 오른쪽부터 왼쪽으로 차례대로 출력이 됩니다.
body의 틀.
전체 틀에 공간을 할당하기 위해서 div 태그로 전체를 감싸안습니다. (id = page-wrapper)
그리고 각 헤더, nav , content도 공간을 할당하기 위해 div로 감싸줍니다.
#content 부분을 봅시다. 메인섹션과 사이드(aside)를 분리시켜야겠죠? (나중에 CSS로 좌우정렬해줍시다) 그래서 div id=content로 감싸줍니다.
div=main-section 으로 할당시켜주고 content의 안에 두개의 article(기사)를 분리시켜주기 위해 그 안에 기사태그(article) 두개를 넣습니다.
각 article(기사)안에 제목(article-header)과 내용(article-body)를 div태그를 이용해서 각각 할당해줍니다.
사이드(aside)의 안에 두개의 사이드 리스트 div를 넣어줍니다.
기사 제목과 내용은 원하는 내용 아무거나 임의로 작성해주세요!
상세한 부분은 제 첨부파일을 에디터(sublime Text/VScode)로 열어보시면 소스코드와 내용 다 볼 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
여기에 모든 CSS 부분을 작성하시면 됩니다!
</style>
</head>
<body>
<div id="page-wrapper">
<header id="main-header">
여긴 제목
</header>
<nav id="main-navigation">
여긴 탭바
</nav>
<div id="content">
여긴 내용
<section id="main-section">
메인 섹션
<article>
기사 1
이미지 삽입 해도되고 안해도되고
코드가 간단하니까 첨부파일 보세요!
</article>
<article>
기사 2
</article>
</section>
<aside id="main-aside">
옆에 aside 부분
<div class="aside-list">
사이드 리스트 1
</div>
<div class="aside-list">
사이드 리스트 2
</div>
</aside>
</div>
<footer id="main-footer">
<a href="#">Created by CodeKat donghyun</a>
</footer>
</div>
</body>
</html>리스트 생성하는 법
리스트에는 순서가 있는 리스트와 순서가 없는 리스트가 있는데요,
- 첫째
- 둘쨰
- 이것이 순서가 있는 리스트 입니다 (orderd - list)
- 첫째
- 둘째
- 이것이 순서가 없는 (unorderd - list)
그래서 앞글자 따서 순서리스트는 <ol> , 순서가 없는 리스트는 <ul>로 생성하고 리스트의 끝에는 당연히 </ol> , </ul>로 닫아줘야합니다.
그리고 리스트 태그안에 각 항목을 <li>로 생성해주면 됩니다.
탭바 부분 html + CSS3
탭 바 부분
<nav id="main-navigation">
<div class="pull-left">
//왼쪽에 있는 탭바 리스트
<ul class="outer-menu">
<li class="outer-menu-item">HTML5</li>
<li class="outer-menu-item">CSS3</li>
<li class="outer-menu-item">PHP</li>
</ul>
</div>
<div class="pull-right">
//오른쪽에 있는 검색입력양식과 버튼
<form>
<input type=text class="input-search">
<input type=submit value="검색" class="input-search-submit">
</form>
</div>
</nav>
아래 부분이 CSS
//만약 마우스가 떠있을때 작동하는 선택자
.outer-menu-item:hover {
background-color: black;
color: red;
}
a {
text-decoration: none;
//하이퍼 링크의 밑줄 등의 형식이 싫으면 없애기
}
li {
list-style: none;
}
//탭바 리스트
//리스트를 float를 이용해 옆으로 정렬했다.
.outer-menu-item {
display: block;
list-style: none;
height: 30px;
width: 80px;
padding: 5px 20px;
text-align: center;
line-height: 30px;
float: left;
}
//탭바 리스트를 왼쪽에 정렬
.pull-left {
height: 40px;
float: left;
}
//검색부분을 오른쪽에 정렬
.pull-right {
height: 26px;
/* width: 50; */
padding: 7px;
float: right;
}
//검색버튼
.input-search {
display: block;
height: 24px;
width: 120px;
padding-left: 10px;
border: 1px solid #CCCCCC;
border-radius: 15px 0 0 15px;
float: left;
}
//텍스트를 받는 입력 양식 => 탭바의 검색창 밖에 없으므로 검색창을 말하는것
//검색창을 입력하게 되면 노란색으로 변하게함.
input[type=text]:focus {
background-color: yellow;
outline: 0px;
}
사이드 부분
자손 : <div class= "aside-list">바로 안쪽에는 h3, ul태그가 있죠? 이것이 자손이고 (상위선택자)>(하위선택자) 로 표기합니다.
후손 : <div class= "aside-list> 바로 안쪽에는 h3, ul가 있고 그 안쪽에는 li , 또 그 안쪽에는 a가 있죠? 이 모든 것들을 후손이라하고
(상위선택자) (후손중 선택자하나)로 공백을 두고 표기합니다.
<aside id="main-aside">
<div class="aside-list">
<h3>카테고리</h3>
<ul>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
</ul>
</div>
<div class="aside-list">
<h3>최근 글</h3>
<ul>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
<li><a href="#">데이터</a></li>
</ul>
</div>
</aside>
CSS3 - style안에 넣어야함
//사이드태그안에 데이터가 있는 하이터 링크 부분은 오렌지 색으로
//" " 공백은 후손 선택자 class=aside-list 태그의 후손인 a태그 선택
.aside-list a {
font-size: 13px;
/* font-display:orange; */
color: orange
}
//사이드태그안에 제목 부분은 파란색으로
//">"은 후손 선택자 class=aside-list 태그의 후손인 a태그 선택
.aside-list>h3 {
font-size: 15px;
/* font-style: blue; */
color: blue;
}
//메인 섹션과 사이드를 옆으로 정렬함
#main-section {
width: 710px;
float: left;
}
#main-aside {
width: 200px;
float: right;
}
padding과 border가 뭐죠?
width ,height 는 글자 자체의 크기
padding : 글자 바깥쪽의 여백으로, padding까지가 하나의 '박스'이다. (클릭했을때 반응함)
border : 테두리
margin : 컴포넌트 바깥의 보이지 않는 투명한 여백 (박스에 포함되지 않는다! 클릭해도 반응 안한다.)
'Front-End (JS , jQuery)' 카테고리의 다른 글
| [HTML/JS] JS기초 : 행맨 게임 만들어보기! (0) | 2022.04.17 |
|---|---|
| JS 기초 : 난수 생성하기 - 숫자 맞추기 게임 실습 (0) | 2022.04.15 |
| [html/CSS] div 가운데 정렬 하는법 (0) | 2022.04.15 |
| [html/CSS] position , overflow 속성으로 레이아웃 배치 , float 사용시 주의사항 (0) | 2022.04.14 |
| HTML 기본 태그 - 사용자 회원 가입 정보 입력받기 예제 (0) | 2022.04.09 |
댓글