꾸민다...꾸민다...!
개발 환경
- VS Code
- CSS3
- HTML5
스타일 적용 방법
인라인 스타일
- 태그에 직접 style 속성 작성
- 장점: 우선순위가 가장 높고, 간단한 수정이 용이함
- 단점1: 여러 군데에 동일한 속성 적용이 어려움
- 단점2: 여러 속성을 ;로 구분해서 써야하므로 가독성 떨어짐
<h1 style="color:red; background-color:yellow">Hello Design</h1>스타일 태그
- style 태그를 생성해 외부에서 디자인
- 가독성이 좋지만 선택자(selector)를 알아야 함
<style>
h2{
color:blue;
}
</style>## 스타일 파일
- css 확장자를 가진 파일에 디자인 코드 작성
- 가장 손이 많이 가지만 디자인 모듈을 만들 때 사용
기본 설정
인코딩 설정
01.basic.css 파일 생성
- 파일을 새로 만들었으므로 인코딩 설정 필요
@charset "UTF-8";
h3{
color:green;
}파일 연결
link 태그로 css 파일을 html파일과 연결
- 역할(rel)과 유형(type) 지정 필요
<link rel="stylesheet" type="text/css" href="01.basic.css">선택자(Selector)
- style, link는 head에 생성
- style 태그를 이용해 디자인할 경우, 선택자가 반드시 필요함
선택자 종류
- 태그 선택자: 태그명으로 대상을 선택(비권장. 너무 광범위함)
- 속성 선택자: 태그의 속성을 이용하여 대상을 선택
- 아이디 선택자: 태그에 부여된 식별자(ID)로 대상을 선택
- 약식 표현 지원(#ID)
- [주의] 아이디는 페이지 내에서 유일해야 함
- 클래스 선택자: 태그에 부여된 클래스(class)로 대상을 선택
- 약식 표현 지원(.class)
- [주의] 여러 개에 동일한 클래스 부여 가능, 하나에 여러 클래스 부여 가능
<style>
h1{
color:blue;
}
h1[id=test]{
/* background-color: yellow; */
}
[id=test]{
/* background-color: yellow; */
}
#test{
background-color: yellow;
}
[class=a]{
/* text-decoration: underline; */
}
.a{
text-decoration: underline;
}
.b{
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Hello CSS</h1>
<h1 id="test">Hello CSS</h1>
<h1 class="a">Hello CSS</h1>
<h1 class="a b">Hello CSS</h1>
<h1 class="b">Hello CSS</h1>
</body>
</html>색상 속성
- 색상 키워드 (ex. yellow, red, green,...)
- RGB (ex. rgb(255, 255, 255)
- RGBA: 투명도 설정(0~1)
- Hex String (ex. #0000FF)
- HSL: 색상, 채도, 명도 (ex. hsl(0, 100%, 50%))
width 속성
- 입력창을 500px로 설정
-> 내용이 500px로 설정됨 - 테두리까지가 입력창 영역으로 지정되어야 함
- box-sizing 속성 필요
- content-box(기본값), border-box
- margin 좌우값 없어야 함(폭을 제어하기 위해서)
- height는 자동 계산(여백/글자크기 등에 의해서)되어야 하므로 잘 안씀
display 속성
- 디자인에서 html 태그 <br> 안씀
- 배치되는 방식을 결정
배치 방향별 속성
- inline: 오른쪽으로 이동하며 배치(폭 지정 불가)
- block: 아래로 이동하며 배치(폭 지정 가능)
- inline-block: 오른쪽으로 이동하며 배치(폭 지정 가능)
- none: 숨김
- [참고] margin-top과 margin-bottom은 서로 상쇄됨
<div>
보이는 태그 뿐 아니라 자리를 잡기 위한 영역 설정에 사용
-
일관된 디자인 가능
- 영역을 미리 잡아두고 태그를 넣는 방식 사용
- 이 영역 안에 넣는 입력창/버튼 등의 폭은 100%로 설정
-
정렬: 디자인을 먼저 만들고 태그 만들기
- .left, .right, .center 같은 디자인을 먼저 만들고 태그에 클래스를 붙이기
- 클래스 이름만 바꾸면 디자인이 바뀜
- 모바일 ui에서도 효율적으로 디자인 가능한 방법이기 때문에 권장함
그리드
- 화면 내부에 배치될 요소들의 자리를 미리 잡아줄 수 있는 속성들을 클래스로 미리 준비해두고 필요한 곳에 불러다 쓰는 방식 사용
컨테이너
.container-300 { width:300px; margin:0 auto; }
.container-350 { width:350px; margin:0 auto; }
.container-400 { width:400px; margin:0 auto; }
...- container: 작은 화면의 외부 영역을 관리하는 도구
- 폭 조절과 가운데 배치를 할 수 있어야 함
- css에서는 계산식이 모든 브라우저에서 작동하지 않음
- 미리 예상 가능한 크기를 준비해두고 편하게 쓰기
row
.row {margin: 10px 0px;}- container 내부에 배치될 도구들이 위치할 자리에 해당
- 상하 margin만 부여하여 간격을 띄워줌
폭
.w-100 {width:100%;}- 폭을 row에 맞게 100%로 설정하거나 아니면 자신의 폭을 그대로 사용
- 아무 표시도 하지 않으면 폭을 있는 그대로 두고 클래스를 부여하면 100%로 변경
<div class="container-300 center">
<div class="row center">
<h1>로그인</h1>
</div>
<div class="row">
<input class="w-100" type="text" name="memberId" placeholder="아이디">
</div>
<div class="row">
<input class="w-100" type="password" name="memberPw" placeholder="비밀번호">
</div>
<div class="row">
<button class="w-100" type="submit">로그인</button>
</div>
<div class="row">
<a href="#">비밀번호를 잊으셨나요?</a>
</div>
</div>