Weekly I Learned(1주차) CSS 레이아웃은 무엇일까 ?

정경훈·2021년 9월 5일

CSS Flex block html inline position 레이아웃

✔ CSS 레이아웃은 무엇일까?

🚩 MDN에서 정의된 CSS 페이지 레이아웃

👉 웹페이지에 포함될 요소들을 취합할 수 있게 해주며, 그들 요소가 일반 레이아웃 대열 상에 기본값 위치 기준과 부모 컨테이너, 또는 메인 뷰포인트 및 메인창과 비례해 어느 위치에 놓일 것인지를 제어한다.

🤔 내가 이해한 CSS 페이지 레이아웃

👉 내가 웹페이지 생성을 위해 html로 만들어 주었던 뼈대들의 내용을 각각의 이유를 가지고 배치시키는 작업이다. 이는 웹페이지를 만드는 사람과 이용하는 사람이 모두 보기 좋고 효율적으로 이용할 수 있게 만들어주는 과정이라고 생각했다.

✔display 속성 : block element와 inline element

🚩 당신들은 누구십니까??? (CSS요소를 잘 적용하기 위해서는 꼭 알고 가도록 하자!)

👉 display에서 대부분의 엘리먼트에 대한 기본값은 'block' & 'inline' 이다.

👉 알아볼 내용 : 1. 블록 요소 2. 인라인 요소 3. box-sizing : border-box

1. 블록 요소(block elemenet)

대부분의 HTML의 요소이다.
새 줄에서 시작해 좌우로 최대한 늘어난다.
요소의 바로 옆(좌,우측)에 다른 요소를 붙여넣을 수 없다.
width, height, margin, padding 속성을 지정하면 모두 반영된다.
해당태그 : "header" , "footer", "p" , "li", "table", "div", "h1" 등
블록 요소의 예시

2. 인라인 요소(inline elemenet)

요소끼리 서로 한줄에, 바로 옆에 위치할 수 있다.
단락의 흐름을 방해하지 않은 채 텍스트를 감쌀 수 있다.
해당태그 : "span" , "a", "img" 등
width와 height 속성을 지정해도 무시되며, margin과 padding 속성은 좌우만 반영된다.(단점)
인라인 요소의 예시

🚩 너는 누굴 닮아서 그렇게 말을 안듣니 박스야!!!😭

이번주 초반 나는 html과 css를 배우며, 디스플레이 속성을 활용해서 이런 저런 실습들을 진행해 보았다.
그런데 나의 박스들은 박스너비는 동일하면서 margin 값과 padding 값을 넣어 바꾸고 싶은데 박스가 커지거나 작아져 이를 해내지 못했다. 🥲🥲
그 때 태양님의 도움으로 내가 지나가듯 훑어보았던 "box-sizing : boder-box" 를 되돌아 보았다.

box-sizing : border-box란?

나와 같은 코린이들이나 개발자들이 border의 주변 값들(padding,margin)에 의해 박스의 너비가 변경되어 불편을 겪었기 때문에, 박스의 너비를 쉽고 간단하게 지정하기 위해 나타난 구세주라고 생각한다.

👉 위 예시를 보자 아주 지네가 생기고 싶은대로 맘대로 생겼다..🥲

👉 위 예시는 "*"선택자를 이용해 아래 모든 아이들에게 "box-sizing : border-box"를 먹였다. 이를 이용해서 나는 개비스콘을 먹은 CF속 주인공이 부럽지 않을 정도로 편안함을 얻을 수 있었다. 혹시 나와 같은 고통을 겪을 코린님들이 계시다면 참고가 되었으면 좋겠다.

✔ 레이아웃선생님, position을 알고 싶어요. 😭

🚩 position아 넌 누구니?

👉 position 이 친구도 코린이인 나에게 많은 슬픔을 주었다.

👉 알아볼 내용 : 1. position 값의 종류 2. relative 와 absolute 3. 나의 과제 풀이

1. position 값의 종류

position : static 👉 위치가 지정된 것이 아니라고 표현하고, 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됨
position : relative 👉 별도의 프로퍼티를 지정하지 않은 이상 static와 동일, 하지만 지정된 요소에 top, right, bottom, left를 지정하면 위치가 조정된다.(-값 지정시 아래로 떨어지지 않고 위로 상승하게 된다)
position : absolute 👉 위치가 절대적으로 지정된 것이다 *단, 부모 중 relative, fixed, absolute가 하나라도 있으면 그 부모에 의해 절대적으로 움직인다.*
position : fixed 👉 뷰포트에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻이다. (top, right, bottom, left를 사용)

2. relative 와 absolute

(1) position : relative

👉 .relative1은 top, right, bottom, left 프로퍼티의 값을 지정하지 않았음(제 자리를 지키고 있음)
👉 .relative2은 top과 left의 값에 각각 -20px와 20px의 값을 지정(top 프로퍼티에 -값을 지정 했으므로 상승, left 프로퍼티에 20px를 지정했기 때문에 왼쪽으로부터 20px 이동함)

(2) position : absolute

👉 "position : absolute"는 부모의 요소에 따라 상대적인 움직임을 가져가는 친구이고, 부모의 요소가 "position : relative" 가 되어야만 한다.
👉 .relative는 .absolute의 부모 요소로 "position : relative"가 적용되어 있다.
👉 .absolute는 .relative(부모)를 따라 top , right 프로퍼티에 각각 120px와 0의 값을 지정하여 위치한 모습이다.

3. css를 이용한검색창 만들기

🚩 내가 사용한 css 코드들

  /*전체 박스 너비 고정*/
*{
  box-sizing: border-box
} 
/*(1) 검색창 내용들(검색어 입력, 테두리 색, 폰트크기 등 */
input{
  width : 100%;
  border : 1px solid #bbb;
  margin : 8px;
  padding : 10px 12px;
  font-size : 14px;
}
/*(2) 검색창 포지션 설정(부모요소)*/
.searchbar{
  position : relative;
  width : 300px;
}
/*(3) 돋보기 이미지 위치 및 크기 설정(자식요소)*/
.searchbar img{
  position : absolute;
  width : 17px;
  top : 10px;
  right : 12px;
  margin-top : 7px;
}

🚩 내가 완성한 검색창

🚩 내가 어려움을 겪었던 내용들

1. 돋보기 이미지를 "position : absolute" 를 적용하기

👉 부모요소가 없었기 때문에 돋보기는 꽤나 오랜 시간동안 페이지의 오른쪽 구석에 쳐박혀 있었다. 이를 해결하기 위해 부모요소를 냉큼 만들어 포지션을 지정했다.
(분.명.히 부모요소를 따라 움직인다고 문제에서도 postion : relative 값을 주라고 친절히 알려주었다. 보고서도 난 이를 잊었다. 내 머리는 휘발성 메모리 인가보다..🥲)

2. 검색창에서 움직이지 않는 돋보기
👉 돋보기를 검색창 안으로 넣긴 했지만... 이 돋보기는 상단에 박혀 움직임이 없었다. 이런저런걸 다 써보다가 결국 상단에 마진을 주어 위치시키긴 했지만 뭔가 찝찝하다.

⭐마치는 글⭐

이번주는 정말 나에게 전쟁과도 같은 한 주 였다.
HTML,CSS,Javascript 3가지를 모두 공부해야 하였고, Javascript 시험에서는 좋은 성적을 얻지 못해 나 자신에게도 실망을 했다.😰😰
하지만, 지금은 모를 수 있지만 나중에도 모르면 그것이야 말로 정말 정말 부끄럽고 실망스러운 것이다. 또 다른 방향으로 생각해보면 나는 이제 더는 뒤로 떨어질 곳도 없고 올라가기만 하면 된다고 생각한다.

앞으로 남은 부트캠프 기간동안은 먼저 공부해왔고 그렇기 때문에 앞서 나가고 있는 많은 분들을 쫓으려 애쓰기보다는 나의 페이스에 맞춰 진도를 따라가며 배우는 내용들을 내 것으로 만들 수 있도록 노력해야겠다.
잘해야겠다는 욕심, 조바심 보다는 꾸준함과 노력으로 포기하지 말고 성과를 만들어 낼 수 있도록 하자. 화이팅 👍

본문 내 이미지 출처

position 2. relative 와 absolute : https://ko.learnlayout.com/

슬램덩크 이미지 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=yhgi1012&logNo=220649561955

정경훈

발전하고 싶은 프론트엔드 개발자 입니다 :)

이전 포스트

TIL - Semantic Web & Semantic Tags

다음 포스트

Weekly I Learned(1주차) CSS 레이아웃은 무엇일까 ?

✔ CSS 레이아웃은 무엇일까?

🚩 MDN에서 정의된 CSS 페이지 레이아웃

👉 웹페이지에 포함될 요소들을 취합할 수 있게 해주며, 그들 요소가 일반 레이아웃 대열 상에 기본값 위치 기준과 부모 컨테이너, 또는 메인 뷰포인트 및 메인창과 비례해 어느 위치에 놓일 것인지를 제어한다.

🤔 내가 이해한 CSS 페이지 레이아웃

✔display 속성 : block element와 inline element

🚩 당신들은 누구십니까??? (CSS요소를 잘 적용하기 위해서는 꼭 알고 가도록 하자!)

👉 display에서 대부분의 엘리먼트에 대한 기본값은 'block' & 'inline' 이다.

👉 알아볼 내용 : 1. 블록 요소 2. 인라인 요소 3. box-sizing : border-box

1. 블록 요소(block elemenet)

2. 인라인 요소(inline elemenet)

🚩 너는 누굴 닮아서 그렇게 말을 안듣니 박스야!!!😭

box-sizing : border-box란?

나와 같은 코린이들이나 개발자들이 border의 주변 값들(padding,margin)에 의해 박스의 너비가 변경되어 불편을 겪었기 때문에, 박스의 너비를 쉽고 간단하게 지정하기 위해 나타난 구세주라고 생각한다.

👉 위 예시를 보자 아주 지네가 생기고 싶은대로 맘대로 생겼다..🥲

✔ 레이아웃선생님, position을 알고 싶어요. 😭

🚩 position아 넌 누구니?

👉 position 이 친구도 코린이인 나에게 많은 슬픔을 주었다.

👉 알아볼 내용 : 1. position 값의 종류 2. relative 와 absolute 3. 나의 과제 풀이

1. position 값의 종류

position : static 👉 위치가 지정된 것이 아니라고 표현하고, 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됨

position : relative 👉 별도의 프로퍼티를 지정하지 않은 이상 static와 동일, 하지만 지정된 요소에 top, right, bottom, left를 지정하면 위치가 조정된다.(-값 지정시 아래로 떨어지지 않고 위로 상승하게 된다)

position : absolute 👉 위치가 절대적으로 지정된 것이다 단, 부모 중 relative, fixed, absolute가 하나라도 있으면 그 부모에 의해 절대적으로 움직인다.

position : fixed 👉 뷰포트에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻이다. (top, right, bottom, left를 사용)

2. relative 와 absolute

(1) position : relative

(2) position : absolute

3. css를 이용한검색창 만들기

🚩 내가 사용한 css 코드들

🚩 내가 완성한 검색창

🚩 내가 어려움을 겪었던 내용들

1. 돋보기 이미지를 "position : absolute" 를 적용하기

⭐마치는 글⭐

본문 내 이미지 출처

position 2. relative 와 absolute : https://ko.learnlayout.com/

슬램덩크 이미지 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=yhgi1012&logNo=220649561955

TIL - Semantic Web & Semantic Tags

Weekly I Learned(1주차) 이번주는 개구리랑 Flex 해버렸지 뭐야~?

0개의 댓글

Weekly I Learned(1주차) CSS 레이아웃은 무엇일까 ?

✔ CSS 레이아웃은 무엇일까?

🚩 MDN에서 정의된 CSS 페이지 레이아웃

👉 웹페이지에 포함될 요소들을 취합할 수 있게 해주며, 그들 요소가 일반 레이아웃 대열 상에 기본값 위치 기준과 부모 컨테이너, 또는 메인 뷰포인트 및 메인창과 비례해 어느 위치에 놓일 것인지를 제어한다.

🤔 내가 이해한 CSS 페이지 레이아웃

✔display 속성 : block element와 inline element

🚩 당신들은 누구십니까??? (CSS요소를 잘 적용하기 위해서는 꼭 알고 가도록 하자!)

👉 display에서 대부분의 엘리먼트에 대한 기본값은 'block' & 'inline' 이다.

👉 알아볼 내용 : 1. 블록 요소 2. 인라인 요소 3. box-sizing : border-box

1. 블록 요소(block elemenet)

2. 인라인 요소(inline elemenet)

🚩 너는 누굴 닮아서 그렇게 말을 안듣니 박스야!!!😭

box-sizing : border-box란?

나와 같은 코린이들이나 개발자들이 border의 주변 값들(padding,margin)에 의해 박스의 너비가 변경되어 불편을 겪었기 때문에, 박스의 너비를 쉽고 간단하게 지정하기 위해 나타난 구세주라고 생각한다.

👉 위 예시를 보자 아주 지네가 생기고 싶은대로 맘대로 생겼다..🥲

✔ 레이아웃선생님, position을 알고 싶어요. 😭

🚩 position아 넌 누구니?

👉 position 이 친구도 코린이인 나에게 많은 슬픔을 주었다.

👉 알아볼 내용 : 1. position 값의 종류 2. relative 와 absolute 3. 나의 과제 풀이

1. position 값의 종류

position : static 👉 위치가 지정된 것이 아니라고 표현하고, 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됨

position : relative 👉 별도의 프로퍼티를 지정하지 않은 이상 static와 동일, 하지만 지정된 요소에 top, right, bottom, left를 지정하면 위치가 조정된다.(-값 지정시 아래로 떨어지지 않고 위로 상승하게 된다)

position : absolute 👉 위치가 절대적으로 지정된 것이다 *단, 부모 중 relative, fixed, absolute가 하나라도 있으면 그 부모에 의해 절대적으로 움직인다.*

position : fixed 👉 뷰포트에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻이다. (top, right, bottom, left를 사용)

2. relative 와 absolute

(1) position : relative

(2) position : absolute

3. css를 이용한검색창 만들기

🚩 내가 사용한 css 코드들

🚩 내가 완성한 검색창

🚩 내가 어려움을 겪었던 내용들

1. 돋보기 이미지를 "position : absolute" 를 적용하기

⭐마치는 글⭐

본문 내 이미지 출처

position 2. relative 와 absolute : https://ko.learnlayout.com/

슬램덩크 이미지 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=yhgi1012&logNo=220649561955

TIL - Semantic Web & Semantic Tags

Weekly I Learned(1주차) 이번주는 개구리랑 Flex 해버렸지 뭐야~?

0개의 댓글

position : absolute 👉 위치가 절대적으로 지정된 것이다 단, 부모 중 relative, fixed, absolute가 하나라도 있으면 그 부모에 의해 절대적으로 움직인다.