CSS의 습격?은 계속되고 있습니다.^^
아 어렵네요. HTML이나 CSS나 태그 하나씩만 보면 다 알겠는데 실습하거나
뭔가 하나씩 코드를 만드려고 하면 제대로 만들기가 쉽지 않습니다.
사용하는 태그 자체가 체계적이지 못합니다. 같은 과제를 해도 보여지는건 얼추 비슷해 보이는데
실상 코드를 보면 차이가 많이 납니다.
강사님이 설명을 잘해주셔서 코드만드는 실습을 할때 따라해보면 시간이 금방 갑니다.
눈에 바로바로 보이니 재밌기도 해서 과정이 끝나고 프론트엔드쪽도 공부해볼까 하는 욕심도 듭니다.
오늘 배운 것들 정리해 보겠습니다.
position
position은 태그의 위치를 지정해주는 속성입니다.
기본적으로 모든 태그들은 따로 position 속성값을 주지 않으면 static 값을 가집니다.
html에 쓴 태그 순으로 normal flow 에 따라 위치가 지정되게 됩니다.
position 의 두번째 속성값으로 relative 가 있습니다.
단어 자체의 뜻처럼 상대적인 속성을 가지고 있습니다.
원래 자신이 있어야 하는 위치에 상대적 이라는 의미입니다.
relative는 자신이 원래 있던 자리를 기억합니다. position: relative; 라고 하고, left: 50px 라고 하면
본인의 static 자리에서 왼쪽으로 50px 만큼 떨어진 자리에 위치하게 됩니다.
또한 left, right, top, bottom 속성을 이용해서 움직일때 다른 콘텐츠들의 레이아웃에 영향을 미치지 않습니다.
position의 세번째 속성값으로 absolute 가 있습니다.position: absolute; 라고 하고 top: 20px; right: 30px 라고 추가적 값을 주면, 오른쪽 상단에 동 떨어진
박스가 놓여있습니다. 왜 이자리에 있나 의문이 들 수 있는데 absolute도 눈치를 보는게 바로 부모 요소입니다.
absolute 는 static을 제외한 position 속성 값을 가진 가장 가까운 부모의 박스 내를 기준으로 위치합니다.
position 의 네번째 속성값으로 fixed 가 있습니다.
스크롤을 올리거나 내릴 때 특정 박스가 고정되어 움직이지 않길 원한다면 fixed 속성을 이용하면 됩니다.position: fixed 를 하면 현재 사용자가 보고 있는 브라우저 화면(뷰포트)을 기준으로 마치 화면에 붙은 것처럼
그 자리에 계속해서 위치할 것입니다. 네이버 첫화면에서 아래쪽으로 스크롤을 내리면 브라우저 상단에
검색창이 고정되어 있는 것을 확인할 수 있는데 바로 이 속성을 이용한 것입니다.
position의 다섯번째 속성값으로 sticky 가 있습니다.
조상에 스크롤이 있을때 position: sticky 라고 하면 가장 가까운 부모 요소의 컨텐츠 영역에 달라 붙습니다.
position의 위치를 변경하다 보면 요소와 요소가 겹치는 일이 발생합니다.
이때 어떤 요소를 더 위로 보이게 할지 결정할 때 사용하는 것이 바로 z-index 속성입니다.
static 을 제외한 position 속성이 적용된 요소의 Z축 순서를 결정할 수 있고, z-index 값이 더 큰 요소가
값이 작은 요소의 위를 덮습니다. 부모요소가 z-index를 높여 자식 앞으로 나올 수 없습니다.
자식 요소는 z-index를 낮춰 부모 뒤로 가는 것은 가능합니다.
flex : flex-container에 사용하는 속성
자식 요소들이 컨테이너 안 공간을 맞추기 위해서 크기를 키우거나 줄이는 방법을 설정합니다.display-flex 라고 부모요소에 사용합니다.
부모요소는 flex-container 라고 하고, 자식 요소를 flex-item 이라고 부릅니다.
1차원적 레이아웃(x축, 혹은 y축)을 위해 주로 사용합니다.
첫번째로 flex-direction 이 있습니다.
컨테이너 내 아이템을 배치할 때 방향을 지정합니다. 차원적 레이아웃(x축, 혹은 y축)을 위해 주로 사용합니다.flex-direction: row 기본값이고 왼쪽 그림처럼 주축이 왼쪽에서 오른쪽 행 방향입니다.flex-direction: column 위에서 아래 방향 이고, 주축이 열 방향입니다.flex-direction: row-reverse 는 주축이 행 방향이나 오른쪽에서 왼쪽방향 입니다.flex-direction: column-reverse 는 주축이 열 방향이고, 아래에서 위 방향 입니다.
두번째로 justify-content 가 있습니다.
주축을 기준으로 배열의 위치를 조절하거나 아이템 간의 간격을 설정할 수 있습니다.justify-content: flex-start 일때
justify-content: flex-start 일때
justify-content: center 일때
justify-content: space-between 일때 item을 양쪽 끝에 배치 하고 좌우 간격을 두어 배열
justify-content: space-around 일때 item의 좌우 간격을 두어 배열하여 양쪽 끝부분 공간이 작음.
justify-content: space-evenly 일때 양쪽 끝에서 부터 item 과 같은 간격을 두어 배열 양쪽 끝부분 공간도 일정
어제의 과제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>위니브 로그인</title>
<style>
* {
margin: 0;
padding: 0;
}
a, p {
font-size: 12px;
/* line-height 줄의 높이를 조절, height는 요소자체의 높이를 조절*/
line-height: 15px;
}
a {
/* 텍스트밑에 라인 없앰 */
text-decoration: none;
/* 텍스트 색깔 공통 */
color: #767676;
}
img {
vertical-align: top;
}
/*
h1 태그가 안 보이게 하는 부분인데 naver의 코드를 가져와서 수정함.
position: absolute 한 이유는 clip 속성을 사용하고 싶어서 썼음.
clip은 언제 지원이 끊길지 모르는 태그이고, 새로 나온 clip-path 사용할 수 있다.
아래 코드에서는 clip: rect(0 0 0 0) 삭제하고, clip-path: inset(50%) 사용함.
네이버는 옛날 브라우저에서 인식을 못할 수도 있어서 clip을 사용한듯함.
요소를 잘라내고 싶을때 사용하는태그 인데 0 0 0 0 을 준거는 다 잘라버리겠다는 의미
태그 사이즈가 넘어도 안 보이게 하는 등 처리를 했는데
그래도 혹시나 나타날까봐 한번 더 해줬다고 보면 됨
*/
.a11y {
position: absolute;
clip-path: inset(50%);
/* 0px이 아닌 이유는? 요소의 넓이나 높이가 0px이면 브라우저 입장에서 봤을때 읽지 않을 수도 있다. */
width: 1px;
height: 1px;
/* 태그 사이즈를 넘었을때 안보이게 한다. */
overflow: hidden;
}
.cont-login {
width: 350px;
padding: 18px 16px 17px;
border: 1px solid #DBDBDB;
border-radius: 5px;
/* 요소의 넓이를 고정하고 싶을때 */
box-sizing: border-box;
}
.link-login {
display: block;
padding: 14px 0 11px 0;
margin: 16px 0;
border-radius: 4px;
/* 앵커의 자식들중에 텍스트를 가운데로 정렬하겠다. */
text-align: center;
background-color: #711BFF;
/* 텍스트 색깔 조절 */
color: white;
/* 인라인요소는 넓이값을 조절할 수 없습니다. 요소의 넓이와 높이는 안 주는게 좋다. 유연한 ui를 만들기 위해서*/
/*width: 318px;*/
}
.link-login img {
/* 브라우저에 따라 소수점을 처리하는 방법이 다르기 때문에 소수점을 값으로 주는 것은 안 좋다.*/
margin-right: 8px;
}
.link-id::after {
content: '';
/* inline 과 inline-block 은 텍스트로 판단한다. 그래서 베이스라인이 기준이 된다. 작대기는 베이스라인 기준으로 그려졌음.*/
display: inline-block;
height: 12px;
width: 1px;
margin-left: 5px;
background-color: #767676;
/* text의 상하를 맞추려면 vertical-align 을 사용한다. */
vertical-align: -2px;
}
.img-find {
vertical-align: -3px;
}
.img-join {
margin-left: 95px;
}
</style>
</head>
<body>
<article class="cont-login">
<h1 class="a11y">위니브에 로그인하기</h1>
<p class="txt-login">더 편리해진 위니브에 오신 것을 환영합니다.</p>
<a href="#none" class="link-login">
<img src="images_login/logo-weniv.png" alt="weniv">
로그인
</a>
<img src="images_login/icon-lock.png" alt="" class="img-find">
<a href="#none" class="link-id">아이디</a>
<a href="#none">비밀번호찾기</a>
<img src="images_login/icon-user.png" alt="" class="img-find img-join">
<a href="#none">회원가입</a>
</article>
</body>
</html>이미지들은 첨부되어 있어서 실행시 이미지가 보이지는 않습니다.
로그인 화면을 구현하는 과제였는데 강사님 따라 해보면서 부족함을 많이 느낄 수 있었습니다.
이런 조그만 로그인 화면에서도 부족함이 많은데 다른 페이지들은 어떻게 구현할 수 있을지 걱정도 됩니다.
강의 시간에 들었던 주요한 사항들을 최대한 주석으로 정리해봤습니다.
'오름캠프(23.12.28 ~ 24.4.18)' 카테고리의 다른 글
| 오름캠프 학습일지(2024/02/02) - 6주차 5일 (0) | 2024.02.02 |
|---|---|
| 오름캠프 학습일지(2024/02/01) - 6주차 4일 (0) | 2024.02.01 |
| 오름캠프 학습일지(2024/01/30) - 6주차 2일 (1) | 2024.01.30 |
| 오름캠프 학습일지(2024/01/29) - 6주차 1일 (1) | 2024.01.29 |
| 오름캠프 학습일지(2024/01/26) - 5주차 5일 (1) | 2024.01.26 |