- 목표 설정, 목표 사용자 설정
- 프로젝트 요구사항 정의 --> 요구사항 명세서
- 스토리보드 (스토리보드 설계서) : 디자인, UI와 UX
- 클래스 함수 설계 --> 클래스 명세서, 소프트웨어 설계서
(구현해야할 것을 모듈로 구분)
CSS 기본 문법 구조
대상 {
속성1 : 값
속성2 : 값
}
대상2 {
속성1 : 값
}
background-color은 글자의 배경색을 지정한다.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>css 실습</title>
<link rel="stylesheet" type="text/css" href="1.css" />
</head>
<body>
<div id="box">
<div id="element1" class="elements">첫 번째 칸입니다.</div>
<div id="element2" class="elements">두 번째 칸입니다.</div>
</div>
</body>
</html>
id로 된 div에 대해서는 해당 div 내에서만 css가 적용된다. (여러 div에 중복되지 않음)
반면에 class는 중복이 가능하며, 아래와 같이 .elements라는 클래스 명에 의해서 color:white라는 스타일이 적용된다.
#box {
background-color: red;
}
#element1 {
background-color: yellow;
}
#element2 {
background-color: orange;
}
.elements {
color: white;
}
div {
width: 100px;
}
div를 작성해서 width를 정해두면 모든 div에 대해 css가 적용된다.
다음과 같이 margin으로 여백을 줄 수 있다.
padding은 안쪽 여백
내부 height의 길이가 바뀌게 된다. (안쪽 여백이 아래 위로 10씩 증가 --> 20px이 추가되어 hieght는 40px가 된다. )
font-size: 폰트의 크기를 지정
font-weight : 폰트의 굵기 지정
text-align : 텍스트의 위치 지정(정렬)
border : 1px solid black;
--> 1px의 검은 실선 경계를 표시
border-radius : 10px --> 10px의 둥근 모서리 지정
display : 가로를 꽉 채움, 블럭 형태
태그에 대한 보여지는 형태 지정
input : 자기 내용물 만큼만 채워주는 inline 형태
- inline은 width등의 기능이 적용되지 않고 텍스트의 길이만큼만 보여진다.
이 단점을 보완하기 위해 inline-block사용
margin-left : -6px (inline-block으로 인해 생기는 오차를 해결)
플렉스??
<position>
position : static;
position: relative;
top: 10px;
left: 10px;
다음과 같이 relative 포지션으로 top, left 값을 변경시키면 div가 이동한다.
position: fixed;
fixed를 사용하면 이 div는 DOM구조를 무시하고 스크롤이 내려가도 항상 같은 자리에 존재한다.
position: absolute;
top:100px;
left:100px
margine-right, margine-left에 auto를 줘서 가운데 정렬
<flex>??
#03c75a
input의 테두리 색상은 light grey
전체 fit-content로 네모의 크기를 설정하고 그 다음에 maring-left 와 right에 auto 설정
요소의 길이를 정할 때는 가장 안에 있는 요소에 길이를 부여 나머지 부모 구조에는 fit-contnet
body태그 자체의 여백을
margin : 0으로 고정하면 된다???
전체 fit-content로 네모의 크기를 설정하고 그 다음에 maring-left 와 right에 auto 설정
요소의 길이를 정할 때는 가장 안에 있는 요소에 길이를 부여 나머지 부모 구조에는 fit-contnet
네이버 로그인창 클론 코딩
<!DOCTYPE html>
<html lang="kr">
<head>
<title>네이버</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div class="center">
<div class="center">
<img src="naver.JPG" />
</div>
<div id>
<input class="border" type="text" name="id" /><br />
<input class="border" type="text" name="password" /><br />
<input id="color" type="button" value="로그인" />
</div>
<div>
<span id="order">로그인 상태 유지</span>
<span>IP 보안 OFF</span>
</div>
</div>
</body>
</html>
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: fit-content;
}
.border {
border: 1px solid lightgrey;
width: 500px;
height: 80px;
margin: 5px;
}
#color {
background-color: #03c75a;
color: white;
font-size: 20px;
width: 505px;
height: 90px;
border-color: black;
border-width: 0.2px;
margin: 10px;
}
#order {
margin-right: 300px;
}
다음 과제 : 유튜브 페이지 클론 코딩
1. display : flex (창의 크기에 따라 사진의 크기가 감소)
2. media queary자체가 속성이 됨. (크기가 줄어들다가 일정한 크기가 되면 검색창이 사라진다. )
이 두개로 과제를 수행하기
'Framework > Front-end' 카테고리의 다른 글
StageUs 4주차 : 자바스크립트 이벤트 (0) | 2021.07.31 |
---|---|
StageUs 3주차 : 자바스크립트 (0) | 2021.07.24 |
크레이지 아케이드 게임용 PC 견적 (0) | 2021.07.17 |
웹에 대한 이해, HTML을 이용한 DOM 구조, Semantic과 SEO (0) | 2021.07.13 |
React Native 4주차 강의 요약 (0) | 2021.01.27 |