728x90
style 속성
- CSS(Cascading style sheets), 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어.
- 속성을 추가할 때 ⇒ 속성명 : “속성 값”
<div style="width: 500px;">- width: 너비. max-widht(최대), min-widht(최소)
- height: 높이. max-height(최대), min-height(최소)
- background-color: 배경색, 색상을 태그에 입힐 수 있다.
- rgb(255,255,255): 색상명 대신 rgb코드로 입력이 가능하다.
- rgba(255,255,255,1): a는 불투명도를 나타낸다. 1이 100%이다.
- padding, margin
- padding: 태그 내부 여백
- margin: 태그 외부 여백
- (top, right, bottom, left)
- 값을 한 개만 썼을 경우 4방면이 해당 값으로 적용된다.
- 각 자리에 각각의 값을 입력하면 자리에 맞는 위치에 해당 값이 적용된다.
- 값을 2개 작성했을 경우 각 (상하), (좌우) 값을 적용할 수 있다.
- box-sizing: 박스 크기의 기준을 설정한다.
- display: 영역 노출 크기의 기준을 설정한다.
- 바디 영역의 너비→ 부모 태그를 기준
- 바디 영역이 높이 → 자식 태그를 기준
- background-rasius: 모서리 부분을 타원으로 변경해준다.
div 속성
- div
- 생성 시 처음부터 블록 요소를 가지고 있다.
- 입력한 div의 영역이 작을지라도 부모의 영역을 다 차지하려고 하기 때문에 한 영역에 하나의 div만 차지할 수 있다.
<div style="width: 200px; height: 200px; border: 1px solid;">디브 영역 1</div>
<div style="width: 200px; height: 200px; border: 1px solid;">디브 영역 2</div>디브 영역 1
디브 영역 2
- liline은 자신의 영역 만큼만 차지한다.
<div style="width: 200px; height: 200px; border: 1px solid; display: inline-block;"></div>
<div style="width: 200px; height: 200px; border: 1px solid; display: inline-block;"></div>- display: flex;
- 자식 태그가 여러개 선언되었을 경우, 부모태그의 넓이를 맞춰야 하기 때문에 자식들의 넓이가 부모보다 오바되면 자식들의 넓이를 동일하게 찌그러트리게 된다.
- ‘flex-wrap’을 사용하면 부모의 크기보다 자식의 크기가 클 경우에 부모 크기에 맞춰 오버된 나머지 크기의 자식을 밑으로 떨어트린다.
<div style="width: 500px;">
<div style="display: flex; flex-wrap: wrap;">
<div style="width: 200px; height: 200px; border: 1px solid;">디브 영역1</div>
<div style="width: 200px; height: 200px; border: 1px solid;">디브 영역2</div>
<div style="width: 200px; height: 200px; border: 1px solid;">디브 영역3</div>
<div style="width: 200px; height: 200px; border: 1px solid;">디브 영역4</div>
<div style="width: 200px; height: 200px; border: 1px solid;">디브 영역5</div>
<div style="width: 200px; height: 200px; border: 1px solid;">디브 영역6</div>
</div>
</div>
</div>디브 영역1
디브 영역2
디브 영역3
디브 영역4
디브 영역5
디브 영역6
style 선택자
- 태그들의 속성을 작성하고 태그에 한 번에 적용시켜 줄 수 있다.
- 같은 속성이 두 번 이상 작성되었을 때 가장 마지막으로 작성된 속성이 적용된다.
id 선택자
- css 작성에서 #을 앞에 붙여준다.
- 하나의 태그에 id와 다른 속성 값이 중복되게 입력되면 id 속성의 스타일을 우선으로 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>style 선택자</title>
<style>
#test{
color: hotpink;
}
.block7 {
color: blue;
}
</style>
</head>
<body>
<div id="test" class="block7">나는 id</div> <!--id와 class 동시 적용한 경우-->
</body>
</html>나는 id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>style 선택자</title>
<style>
#test{
color: hotpink;
}
</style>
</head>
<body>
<div id="test">나도 블록체인 9기</div> <!--id만 적용한 경우-->
</body>나도 블록체인 9기
class 선택자
- css 작성에서 클래스 이름 앞에 ‘ . ’을 붙여준다.
- 같은 태그라도 다른 스타일을 적용시킬 때 클래스 선택자를 사용한다. 태그의 클래스 명이 중복 될 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>style 선택자</title>
<style>
.block7 {
color: palevioletred;
}
</style>
</head>
<body>
<div class="block7">나는 id</div>
<div>나는 id</div>
<div class="block7">나는 id</div>
</body>
</html>나는 id
나는 id
나는 id
* 선택자
- 모든 태그에 스타일을 적용시킨다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>style 선택자</title>
<style>
*{
color: hotpink;
}
</style>
</head>
<body>
<div>나도 블록체인 9기</div>
<div>나도 블록체인 9기</div>
</body>
</html>나도 블록체인 9기
나도 블록체인 9기
태그 선택자
- 태그의 이름으로 스타일을 줄 수 있다.
- ‘ , ’로 태그를 나열하여 여러 태그에 속성을 동일하게 적용시킬 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>style 선택자</title>
<style>
div{ color: gray; }
h1,p{ color: red; }
</style>
</head>
<body>
<div>나도 블록체인 9기</div>
<div>나도 블록체인 9기</div>
<h1>나도 블록체인 9기</h1>
<p>나도 블록체인 9기</p>
</body>
</html>나도 블록체인 9기
나도 블록체인 9기
나도 블록체인 9기
나도 블록체인 9기
자식 선택자
부모태그 div의 자식 태그 p
- div p { }
- 부모태그 안에 자식 태그에 스타일을 주고 싶을 때 사용
- .test .content { }
- test클래스를 가지고 있는 태그의 자식 태그 중 content 클래스를 가지고 있는 태그
<div class="test">
<div class="content">
이 자식 태그가 스타일이 적용됨
</div>
</div>- .test.content{ }
- test 클래스와 content 클래스를 둘 다 가지고 있는 태그에 적용
<div class="test content"></div>
두 클래스를 입력할 때 띄어쓰기로 구별한다부모태그 test의 자식 태그 content
- .test > .test.content { }
- test클래스를 가지고 있는 자식 태그 content 클래스 중 가장 첫 번째 자식에 적용
<div class="test">
<div class="content">
이 태그만 스타일이 적용된다.
</div>
<div class="content">
</div>
<div class="content">
</div>link 태그 / css코드
link 태그
- 외부의 css파일이나 favicon(웹 브라우저 탭 이름의 왼쪽 이미지/아이콘 이미지)을 가져올 때 주로 사용한다.
- <link rel="stylesheet" href="외부 css파일의 경로">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="외부 css파일의 경로">
</head>
<body>
</body>
</html>css코드
- 작성위치
- html파일의 “style태그” 영역에서 작성 가능
- 확장자명 “.css”파일을 새로 만들어 속성 부여 가능
- css파일을 만들어 작업하는 것이 수정과 배포에 용이
basic css
display
.display{
display: block; /*block은 블록 요소, div태그의 기본값,
자기의 너비를 전부 갖고 옆에 아무도
없어야한다.*/
display: inline; /*인라인, span, a 등 기본값을 인라인으로
가지고 있고 옆으로 태그가 자리할 수 있다.*/
display: flex; /*자식 태그들을 정렬시킬 수 있다.
정렬시키는 방식은 여러가지가 있다.*/
display: inherit; /*부모한테 값을 가져와서 적용시킨다.
사용할 일이 거의 없다.*/
display: initial; /*태그가 기본적으로 가지고 있던 속성으로
초기화시켜준다. 기본값으로 적용시킨다.*/
display: none; /*화면에서 보이지 않도록 태그를 지워버린다.
추후 자바스크립트에서 display속성이
none으로 적용되어 있으면 선택되지 않는다.*/
}width, height
.wh{
width: 100px; /*태그의 너비*/
height: 100px; /*태그의 높이*/
width: max-content; /*가지고 있는 자식 태그의 너비 만큼
차지한다.*/
width: min-content; /*가지고 있는 자식 태그의 최소 만큼
너비를 차지한다.*/
max-width: 100px; /*설정한 너비 이상으로 태그가 커지지
않는다. 최대 너비*/
min-width: 100px; /*설정한 너비 이하로 태그가 작아지지
않는다. 최소 너비*/
}content
.content{
width: 200px;
height: 200px;
overflow: hidden; /*자식의 태그가 부모영역 이상으로
보이지 않게 설정, 넘쳤을 경우 넘친
공간을 보이지 않게 지워버림*/
overflow: scroll; /*자식 태그의 내용을 스크롤 처리 하도록
만든다.*/
overflow-y: scroll;
overflow-x: hidden; /*y축만 스크롤이 가능한 방법*/
overflow-y: hidden;
overflow-x: scroll; /*x축만 스크롤이 가능한 방법*/
opacity: 1; /*투명도를 설정해줄 수 있다.
1=최대치 (100%), 소숫점 단위로 조절*/
}text
.text{
font-size: 16px; /*글씨의 크기. pc 크롬 기준으로 기본값은
16px이다. 환경(모바일, pc브라우저)에
따라 기본 값이 다를 수 있다.*/
font-weight: 500; /*글씨의 굵기. 기본 값은 500이고, 글꼴을
가져왔을 때 기본값이 변할 수 있다.*/
color: RGBa(0,0,0,0.5); /*글씨의 색. RGB, RGBa(0,0,0,투명도)
등으로 설정이 가능하다.*/
text-align: center; /*글자의 정렬을 가운데로 설정*/
text-align: end; /*글자의 정렬을 오른쪽 끝으로 정렬*/
text-align: start; /*글자를 왼쪽 끝으로 정렬*/
text-decoration: overline; /*텍스트에 줄 긋기
- overline: 텍스트 윗 줄 추가 */
text-decoration: underline; /* -underline: 텍스트 밑 줄 추가 */
text-decoration: none; /*텍스트 꾸밈 요소 제거*/
letter-spacing: 10px; /*글자의 간격 조절*/
}input 태그
- input 태그: 웹 기반 양식에서 사용자의 입력을 받기 위한 상호작용 컨트롤을 생성한다.
- input을 사용할 때 라벨을 붙이는 것처럼 input태그의 이름을 붙인다.
- label태그: input의 이름을 지정할 때 사용하는 태그이다.
- input 태그 타입
- hidden: 사용자에게 보이지 않지만 서버로 값을 넘길 수 있다.
- search: 검색 상자를 넣는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input</title>
</head>
<body>
<h1>인풋 예시</h1>
<ul>
<li>
<label for="">search</label>
<input type="search" id="seh">
</li>
</ul>
</body>
</html>인풋 예시
- tel: 전화번호를 입력하는 필드를 넣는다.
<body>
<h1>인풋 예시</h1>
<ul>
<li>
<label for="">전화</label>
<input type="tel" id="tel">
</li>
</ul>
</body>인풋 예시
- url: url주소를 입력할 수 있는 필드를 넣는다.
- email: 메일 주소를 입력할 수 있는 필드를 넣는다.
- password: 비밀번호를 입력할 수 있는 필드를 넣는다.
- datetime: 국제 표준시로 설정된 날짜와 시간을 넣는다.
- date: 사용자 지역을 기준으로 날짜(연, 월, 일)를 넣는다.
<body>
<h1>인풋 예시</h1>
<ul>
<li>
<label for="">시간</label>
<input type="date" id="time">
</li>
</ul>
</body>인풋 예시
- month: 사용자 지역을 기준으로 날짜(연, 월)를 넣는다.
- week: 사용자 지역을 기준으로 날짜(연, 주)를 넣는다.
- range: 숫자로된 수치를 조절할 수 있는 슬라이드 막대를 만든다.
<body>
<h1>인풋 예시</h1>
<ul>
<li>
<label for="">음량</label>
<input type="range" id="slide" max="10" min="0" value="3" step="1">
</li>
</ul>
</body>인풋 예시
- color: 색상표를 만든다.
<body>
<h1>인풋 예시</h1>
<ul>
<li>
<label for="">색상</label>
<input type="color" id="color">
</li>
</ul>
</body>인풋 예시
- checkbox: 주어진 항목에서 2개 이상 선택가능한 체크박스를 만든다.
- radio: 1개만 선택할 수 있는 체크박스를 만든다.
<!-- 하나만 선택 가능한 체크박스-->
<!--name 속성이 필요한 이유?
서버에 데이터를 보낼 때 데이터의 이름을 정해주는 것-->
<label for="radio">김밥</label>
<input type="radio" name="radio">
<label for="radio">떡볶이</label>
<input type="radio" name="radio">
<label for="radio">라면</label>
<input type="radio" name="radio">
<label for="radio">돈까스</label>
<input type="radio" name="radio">
<!--하나만 선택하는 여러 체크박스에서 중복으로
선택되었는지 체크할 때 동일 name입력하여 사용한다.-->- ile: 파일을 첨부할 수 있는 버튼을 만든다.
- image: 버튼 대신 사용할 이미지를 넣는다.
- button: 버튼을 넣는다.
👩💻 중간실습_메뉴판 만들기
실습 문제
- 메뉴판 만들기
- 메뉴 밑으로 음식이름, 가격 나열
- 화면이 줄어들면 밑으로 떨어져서 나열
- 음식 메뉴는 하나의 묶음(영역)으로 만들기
추후, 주말에 자습으로 제작완료
결과물
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>메뉴판</title>
<link rel="stylesheet" href="./menu.css">
</head>
<body>
<div class="back_g">
<div class="m_title">
<p class="season">2018 winter</p>
<p class="id">we-jiwon</p>
<p class="vol">vol.03</p>
<div class="main_title">푸줏간 고기집 메뉴판</div>
</div>
<div class="p_menu">
<div class="menu">
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2F20141002_132%2Fsang1370_1412259102469OLVt4_JPEG%2FFJ059.JPG&type=a340" alt="소고기이미지_1">
<p>소고기 .......... 18,000원</p>
<p>(120g/국내산) </p>
</div>
<div class="menu">
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2F20141002_132%2Fsang1370_1412259102469OLVt4_JPEG%2FFJ059.JPG&type=a340" alt="소고기이미지_1">
<p>소고기 .......... 18,000원</p>
<p>(120g/국내산) </p>
</div>
<div class="menu">
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2F20141002_132%2Fsang1370_1412259102469OLVt4_JPEG%2FFJ059.JPG&type=a340" alt="소고기이미지_1">
<p>소고기 .......... 18,000원</p>
<p>(120g/국내산) </p>
</div>
<div class="menu">
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2F20141002_132%2Fsang1370_1412259102469OLVt4_JPEG%2FFJ059.JPG&type=a340" alt="소고기이미지_1">
<p>소고기 .......... 18,000원</p>
<p>(120g/국내산) </p>
</div>
</div>
<div class="sub_menu">
<div class="text_menu">
<h1>식사류</h1>
<p>왕갈비탕 .......... 9,000원</p>
<p class="sub_text">(갈비: 국내산)</p>
<p>김치찌개 .......... 5,000원</p>
<p class="sub_text">(김치: 국내산)</p>
<p>차돌된장 .......... 7,000원</p>
<p class="sub_text">(차돌: 국내산)</p>
<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMDA4MjFfMjQx%2FMDAxNTk4MDA3NzY1NzQx.0EIg9hA6fMtwvJaMeZz6bFavqbY0oLJJtYcfNlxoqDwg.3_pGf6age92MmLug9Ba7vygB_D0Dwd8XBCI5xoNIhlYg.JPEG.yuksikga%2F%25BC%25D2%25BA%25CE%25C0%25A7.jpg&type=sc960_832" alt="소 부위">
</div>
<div class="adr">
<p>단체 예약 문의</p>
<p>서울시 영등포구 영신로 220, 6층<br>02)2655-9767</p>
</div>
</div>
<div class="bottom_info">made by. we-jiwon</div>
</div>
</body>
</html>CSS
.back_g{
background-color: beige;
width: 736px;
height: 1233px;
margin: 0;
}
.m_title{
width: 700px;
height: 150px;
margin-left: 15px;
position: relative;
line-height: 1.8;
border: 1px so;
}
.season {
position: absolute;
top: 16px;
left: 30px;
font-weight: bold;
font-size: 15px;
letter-spacing: 3px;
}
.id {
position: absolute;
top: 16px;
left: 310px;
font-weight: bold;
font-size: 15px;
letter-spacing: 3px;
}
.vol {
position: absolute;
top: 16px;
right: 30px;
font-weight: bold;
font-size: 15x;
letter-spacing: 3px;
}
.main_title{
position: absolute;
width: 700px;
height: 88px;
top: 59px;
font-size: 50px;
font-weight: 1000;
text-align: center;
border: 6px solid;
border-left: none;
border-right: none;
}
.p_menu{
display: flex;
flex-wrap: wrap;
width: 700px;
height: 600px;
border: 6px solid;
border-left: none;
border-right: none;
margin-left: 15px;
margin-top: 25px;
}
.menu{
position: relative;
width: 300px;
height: 250px;
top: 33px;
left: 54px;
}
.menu img{
position: absolute;
width: 230px;
height: 170px;
top: 11px;
left: 30px;
}
.menu p{
position: absolute;
top: 190px;
left: 30px;
font-weight: 1000;
font-size: 18px;
letter-spacing: 2px;
margin: 0;
}
.menu p:last-child{
position: absolute;
top: 215px;
font-size: 13px;
}
.sub_menu{
position: relative;
width: 700px;
height: 300px;
}
.text_menu{
position: absolute;
left: 63px;
}
.text_menu h1{
border: 2px solid;
border-top: none;
border-left: none;
border-right: none;
width: 238px;
}
.text_menu p{
font-size: 18px;
font-weight: 1000;
letter-spacing: 2px;
margin: 8px;
margin-left: 0;
}
.text_menu .sub_text{
font-size: 12px;
}
.text_menu img{
position: absolute;
width: 327px;
height: 250px;
left: 299px;
top: 14px;
}
.adr{
background-color: black;
color: white;
width: 700px;
height: 100px;
top: 279px;
left: 16px;
position: relative;
}
.adr p:first-child{
position: absolute;
top: 15px;
left: 30px;
font-size: 50px;
font-weight: bold;
margin: 0;
}
.adr p:last-child{
position: absolute;
top: 26px;
right: 25px;
font-size: 18px;
margin: 0;
}
.bottom_info{
font-weight: bold;
font-size: 15px;
letter-spacing: 3px;
text-align: center;
width: 700px;
border: 6px solid;
border-bottom: none;
border-left: none;
border-right: none;
margin-left: 16px;
position: absolute;
bottom: 42px;
}
