오늘의 공부목차
- 요소의 유형
- 문서의 흐름
- 위치지정하기
- 겹치거나 넘치는 요소 다루기
- 선택자 더 알아보기
- 의사요소와 의사클래스
- 과제 - 채팅방 만들기
1. 요소의 유형
display속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다.
즉, 요소의 유형을 변경할 수 있다.none: 요소를 화면에 표시하지 않는다.block: 요소를 블록 레벨 요소로 만든다.inline: 요소를 인라인 요소로 만든다.inline-block: 요소를 인라인 요소로 표시하되, 블록 레벨을 추가한다.
inline은 block과 달리 width, height가 적용되지 않는다.
그래서 쓰는 것이 inline-block. 범위는 inline으로 사용하되 높이와 너비 설정이 가능.
2. 문서의 흐름
- CSS의
float속성은 문서의 흐름에서 제외시킨 채 부모 요소 또는 루트 요소를 기준으로 위치를 변경한다. - 선택된 요소가 문서의 흐름에서 제외되어 상위 요소의 왼쪽 또는 오른쪽 면에 붙는 형태로 배치가 되도록 하는 특징을 가지고 있다.
- 사용 가능한 속성값으로는 왼쪽을 뜻하는
left, 오른쪽을 뜻하는right, 그리고 float을 적용하지 않음을 뜻하는none이 있다.
clear : float 무시
3. 위치 지정하기
-
position은 문서 상에 요소를 배치하는 방법을 정의한다.
-> position이 요소의 배치 방법을 결정하면
top, bottom, right, left가 최종 위치를 결정하는 방식이다.static: 기본값으로 요소를 일반적인 문서의 흐름에 맞게 배치함relative: 문서의 흐름에 맞춰 배치된 자리를 기준으로 요소를 이동시킴absolute: position이 지정된 상위 요소를 기준으로 이동시킴. 이 때 요소는 문서의 흐름에서 제외됨fixed: 화면을 기준으로 요소의 위치를 고정함
앱솔루트 요소는 position 속성을 가진 요소를 기준으로 위치를 이동한다.
단, 상위 요소 중에 position 속성을 가진 요소가 없다면
그냥 화면을 기준으로 이동한다.
4. 겹치거나 넘치는 요소 다루기
z-index속성은 요소의 쌓임 순서(stack order)를 정의할 수 있다.- 정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 적용되며, 위치 지정 요소에 대해 적용할 수 있는 속성이다.
=> 위치 지정 요소(positition element)란,position 속성이 정의되어 있는 요소를 말한다. - z-index 의 기본값은 auto이며, 정수 값으로 각 요소의 쌓임순선를 결정한다.
- auto는 새로운 쌓임 맥락이 형성되지 않은 자연스러운 상태이다.
- 정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 적용되며, 위치 지정 요소에 대해 적용할 수 있는 속성이다.
< overflow > 콘텐츠 요소의 넘침현상이 발생했을 때 해결방법
visible: 기본값으로, 영역을 벗어난 콘텐츠를 그대로 보여줌hidden: 영역을 벗어난 콘텐츠를 잘라내어 보이지 않게 함scroll: 영역을 벗어난 콘텐츠를 잘라내어 보이지 않게 하고, 잘려진 콘텐츠 진행 방향으로 스크롤을 만듦auto: 웹브라우저의 설정값을 따름.
데스크톱 브라우저에서는 주로 scroll로 처리함
5. 선택자 더 알아보기
기호와 함께 사용하는 속성 선택자
-
*: 값의 포함 여부 -
^: 값의 시작 여부 -
$: 값의 끝 여부
-
속성선택자 : 특정 요소를 명시하여 요소를 선택
[속성명] -
하위요소 선택자 : 상위 요소에 포함된 하위 요소를 선택
공백 -
자식요소 선택자 : 상위 요소의 바로 한 단계 하위 요소를 선택
> -
인접형제 선택자 : 형제 요소 중 첫 번째 형제 요소를 선택
+ -
형제요소 선택자 : 형제 요소를 선택
~
형제 선택자는 뒤이어 등장하는 형제들을 대상으로 한다.
6. 의사요소와 의사클래스
의사클래스(가상클래스)는 선택자에 추가하는 카워드로
요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다.
<자주 쓰이는 의사 클래스들>
hover: 마우스 포인터가 요소에 올라가있다.active: 사용자가 활성화했다. (예를 들어 마우스로 누르기와 같은)focus: 요소가 포커스를 받고있다.disabled: 비활성 상태의 요소이다.nts-child(): 형제 사이에서의 순서에 따라 요소를 선택한다.
의사요소(pseudo-element)는 선택자에 추가하는 키워드로,
이를 이용하면 선택한 요소이 특정 부분에 대한 스타일을 정의할 수 있다.
<자주 쓰이는 의사 요소들>
after: 요소의 앞에 의사요소를 생성 및 추가한다.before: 요소의 뒤에 의사 요소를 생성 및 추가한다.first-line: 블록 레벨 요소의 첫 번째 선에 스타일을 적용한다.marker: 목록 기호의 스타일을 적용한다.placeholder: 입력 요소의 플레이스홀더(자리표시자) 스타일을 적용한다.
7. 과제 - 채팅방 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="chat.css" rel="stylesheet" />
<title>채팅방 만들기</title>
</head>
<body>
<div class="container">
<main class="chat-screen">
<section class="chat-screen__bar">
<div class="user">
<div class="user__column">
<div class="user__pic"></div>
</div>
<div class="user__column">
<div class="user__nick">친구</div>
<div class="user__count">2</div>
</div>
</div>
</section>
</main>
<form class="chat-form">
<section class="chat-form__filed">
<textarea class="chat-form__msg"></textarea>
<input type="submit" value="전송" class="chat-form__btn" />
</section>
</form>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
/* 'height:100%' 화면을 꽉 채워서 쓰겠다는 의미 */
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
/* body에는 기본적인 마진이 존재한다. 0px로 작성해 마진을 없애준다. */
.container {
height: 100%;
background-color: rgb(147, 190, 138);
}
/* 스크린 크기 조정 */
.chat-screen {
height: calc(100% - 120px);
}
/* 유저 정보 표시되는 부분 */
.user {
background-color: antiquewhite;
padding: 16px;
height: 80px;
}
.user__column {
float: left;
}
.user__pic {
width: 50px;
height: 50px;
margin-right: 10px;
border-radius: 10px;
background-color: rgb(147, 190, 138);
}
.user__nick,
.user__count {
margin: 5px;
}
.user__count {
font-size: 12px;
color: gray;
}
/* 채팅 입력창 */
.chat-form {
height: 120px;
background-color: antiquewhite;
}
.chat-form__filed {
height: 120px;
}
.chat-form__msg {
width: calc(100% - 120px);
height: 120px;
border: none;
font-size: 24px;
padding: 10px;
resize: none;
float: left;
}
.chat-form__btn {
width: 120px;
height: 120px;
border-radius: 10px;
background-color: rgb(147, 190, 138);
font-size: 18px;
}
.chat-form__btn:hover {
background-color: rgb(105, 145, 165);
}
.chat-form__btn:active {
background-color: rgb(71, 94, 67);
}
.chat-form__msg:focus {
outline: none;
}
어제의 ock보다 성장한 오늘의 ock_FE 개발자