코누나님 - HTML, CSS / chapter 5 - HTML을 좀 더 쉽게 움직이는 방법

<position 속성의 값들>

static : 웹사이트의 기본 속성값(default 값) , top right bottom left 등 위치 속성은 무시됨.
relative: HTML 태그가 있는 위치에서 left right top bottom값을 통해 움직임
absolute: 부모영역에서 left right top bottom 을 이용해 절대값 기준으로 주어진 위치로 움직임
* 단! 여기서 부모란?: 부모 태그가 relative, absolute, fixed 속성 중 하나여야 함. 만약 부모태그가 해당 속성을 가지고있지 않다면 body태그 기준으로 움직임 왜냐하면 body태그는 relative를 기본 속성으로 가지고 있기 때문이다
fixed : absolute와 비슷하지만 스크롤로 내려도 그 위치에 고정, 무조건 브라우저 창 기준임
Sticky : relative와 비슷하지만 스크롤로 내리면 fixed처럼 그 위치에 고정

일단 기본 코드

<!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 href = "5-1style.css" rel = "stylesheet" type = "text/css" />
</head>
<body>
    <div class = "box red">
        box1
    </div>
    <div class = "box yellow">
        box2
    </div>
    <div class = "box blue">
        box3
    </div>
</body>
</html>

.box {
    width : 100px;
    height : 100px;
}

.red {
    background-color : red;
}

.yellow {
    background-color: yellow;
}

.blue {
    background-color: rgb(79, 96, 255);
}

# yellow 박스에 locate 클래스{ top : 30px; left : 30px; position : relative; }를 추가했을 때

# yellow 박스에 추가된 locate 클래스의 position을 absolute로 바꿨을 때

# yellow 박스에 추가된 locate 클래스의 position을 static로 바꿨을 때

- static은 top, left, right, bottom 등의 위치 속성은 무시한 그냥 default 값이다.

# yellow 박스에 추가된 locate 클래스의 position을 fixed로 바꿨을 때

- 이 예제에서는 absolute와 별 반 다를게 없다.

- 스크롤이 생길 때 까지 박스를 더 추가했을 때

평소에 쇼핑몰 사이트에 들어가보면 스크롤을 내려도 줄줄이 따라오는 집착광공같은 광고나, 퀵메뉴 등등이 이 fixed를 적용한 사례들로 볼 수 있겠다.

여기서 position을 absolute로 바꾸면 스크롤을 내려도 빨간박스 위에 겹쳐져 안보이게 됨을 확인할 수 있다. (안 따라옴)

# yellow 박스에 추가된 locate 클래스의 position을 sticky로 바꿨을 때

위 30px가 되자마자 그 자리에 딱 붙어서 내려오는 모습, 다시 쭈욱 올리면 처음 자리로 돌아간다.

<display : flex>

얘는 내가 현장실습 때 직원분이 대충 써놓은 코드 덕분에 존재를 알게 됐는데, display라고는 학교에서 배운 인라인 블록 인라인블록밖에 몰랐어서 정말 신세계였다. 그 때 진짜 죽어라 봐서 실습은 패스, 강의로만 보기로

강사님이 추천하신 flex 연습 사이트 : https://flexboxfroggy.com/#ko

내가 정말 정말 도움 많이 받은 포스팅 : https://studiomeal.com/archives/197

ㄴ 이거 진짜 올해의 문학(?)상 받아야할 정도로 최고 ... 유료 강의도 하시던데 일단 이 포스팅만으로도 충분한듯.

그 때 display 속성 중 grid도 같이 포스팅하신 것도 열심히 봤었는데 얘는 조금.. 꼼꼼하지 못한 나한텐 flex가 좀 더 실용적인 것 같아서 일단 패스했었다. 나나님도 잘 설명해주셨는데 나중에 기회되면 grid로 한번 사이트를 만들어 보는 것도 나쁘지 않겠다.

https://d2.naver.com/helloworld/8540176 << 여기도 flex를 이용한 여러 레이아웃을 소개시켜주는데 도움되는듯.

1분코딩님 덕분에 개념은 잡았는데 사실 개발자 도구로 이것 저것 적용해본게 정말 많은 도움이 됐었던 기억이 난다.

코딩은 일단 해봐야 실력이 늘어난다는게 맞는듯 (근데 귀찮다.)

<문제 1>

<!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 href = "5-1style.css" rel = "stylesheet" type = "text/css" />
</head>
<body>
    <div class = "box box1">
        box1
    </div>
    <div class = "box box3">
        box3
    </div>
    <div class = "box box2">
        box2
    </div>
</body>
</html>

나는 문제 1번에서만 box 2가 뒤에있어야 결과가 제대로 출력되더라,,, 답안 코드보고 뭐가 문제인지 다 풀고 봐야겠다.

html 코드는 남은 문제 중에도 box3의 유무 차이만 있는 정도는 생략하거나 차이가 있더라도 <body>안 내용만 적도록 하겠다.

html, body {
    padding : 0;
    margin : 0;
}

.box {
    display : inline-block;
    position: relative;
    margin : 0;
    width : 100px;
    height : 100px;
    background-color: black;
    color : #fff;
}

.box1 {
    float : left;
}

.box2 {
    margin-right : 10px;
    float : right;
}

.box3 {
    float : right;
}

<문제 2>

html, body {
    padding : 0;
    margin : 0;
}

.box {
    display : block;
    position: relative;
    margin : 0;
    width : 100px;
    height : 100px;
    background-color: black;
    color : #fff;
}

.box1 {
    top : 0px;
    left : 0px;
}

.box2 {
    margin: 0 auto;
}

.box3 {
    float:right;
}

<문제 3>

<div class = "box box1">
    box1
    <div class = "box box2">
        box2
    </div>
</div>

.box {
    position: relative;
    color : #fff;
}

.box1 {
    width : 200px;
    height : 200px;
    margin : 30px auto;
    background-color: black;
}

.box2 {
    width : 100px;
    height : 100px;
    margin : auto;
    position : absolute;
    transform: translateX(-50%) translateY(-50%);
    left : 50%;
    top : 50%;
    background-color: #333;
    vertical-align: middle;
}

<문제 4>

<div class = "box box1">
    box1
</div>

<div class = "box box2">
    box2
</div>

html, body {
    padding : 0;
    margin : 0;
}

.box {
    width : 100px;
    height : 100px;
    position: relative;
    margin : 0;
    color : #fff;
}

.box1 {
    background-color: black;
}

.box2 {
    position: absolute;
    background-color: #333;
    top : 50px;
    left : 50px;
}

<문제 5>

html, body {
    padding : 0;
    margin : 0;
}

.box {
    position: absolute;
    margin : 0;
    color : #fff;
}

.box1 {
    bottom : 0;
    right : 0;
    width : 400px;
    height : 250px;
    background-color: black;
}

.box2 {
    width : 150px;
    height : 150px;
    position: absolute;
    bottom : 0;
    background-color: #333;
}

.box3 {
    width : 150px;
    height : 150px;
    position: absolute;
    margin : auto 0;
    right : 0;
    top : 0;
    background-color: #333;
}

<div class = "box box1">
    box1
    <div class = "box box2">
        box2
    </div>
    <div class = "box box3">
        box3
    </div>
</div>

----

정답을 보고왔는데 저번 구글사이트때는 flex 남발을 했으면서 이번엔 왜 하나도 안썼을까.....

어휴... 내일 일어나서 시간남으면 다시 flex로 코드를 짜봐야겠다.

정답 링크 : https://hackmd.io/@oW_dDxdsRoSpl0M64Tfg2g/rJ91twR1K

Css 심화: 태그를 내맘대로 위치시키기 challenge 정답 - HackMD

# Css 심화: 태그를 내맘대로 위치시키기 challenge 정답 ## 도전 1 정답 ![](https://i.imgur.com/Yy2i9sJ.png) * HTML ```htm

hackmd.io

'html, css' 카테고리의 다른 글

코누나님 - HTML, CSS / Chapter 7 - 반응형 웹사이트 만들기 Bootstrap (0)	2022.05.16
코누나님 - HTML, CSS / chapter 6 - Spotify 웹사이트 만들기 (0)	2022.05.15
코누나님 - HTML, CSS / Chapter 4 - 구글 웹사이트 만들기 (0)	2022.02.07
코누나님 - HTML, CSS / Chapter 3 - CSS 웹사이트 꾸미기 (0)	2022.02.06
코누나님 - HTML, CSS / Chapter 2- HTML 웹사이트 뼈대 (0)	2022.02.06

hykim

코누나님 - HTML, CSS / chapter 5 - HTML을 좀 더 쉽게 움직이는 방법

'html, css' 카테고리의 다른 글

티스토리툴바

코누나님 - HTML, CSS / chapter 5 - HTML을 좀 더 쉽게 움직이는 방법

'html, css' 카테고리의 다른 글

'html, css' Related Articles

티스토리툴바