웹1 7일차(24.01.18), 6일차 복습

<정렬요소>

도형인지 텍스트인지 요소에 따라 정렬형태가 달라짐.

도형 -> margin

텍스트 -> text-align

 

---

<여백속성> - padding

 

[특징]

1. inline요소에 padding-top과 padding-bottom을 적용하게 되면, 태그는 고정된 상태로 padding값만 적용된다.

ㄴ padding-top값이 적용된거지만 화면은 이동하지않음.

inline 한정.

 

 

=> display를 inline-block요소로 변경하면 됨.

 

 

2. 수치가 같으면 생략할 수 있다.

 

ex) 상하값이 같고, 좌우값이 같으면 =>

padding : 상하 (띄어쓰기) 좌우;

padding : 30px 40px;

 

ex) 상하좌우값이 같으면 =>

padding: 상하좌우;

padding: 40px;

 

주의사항) 

한 방향의 값만 같은 상황이라면 수정되는 상황을 위해서 식이 더 길어지더라도 padding-left등 처럼 직접 풀어서 작성하는 것이 좋다.

 

 

https://codepen.io/hayeong0409/pen/YzgZGEL

padding

 

margin과는 사용처만 다를 뿐 방법은 padding과 같다.

 

---

 

도형요소 정렬

 

<정렬 공통 특징>

- 상위엘리먼트와 하위엘리먼트 크기가 같으면 정렬할 수 없다.

너비는 충분한 경우가 많지만 높이는 모든 태그가 기본값일 때 0으로 작동하기때문에 정렬되지않는 경우가 많다.

세로정렬했을 때 제대로 정렬되지 않는다면 상위엘리먼트 높이가 충분한지 한번씩 체크해보자.

 

=> 여백이 없으면 움직일 수 있는 공간이 없다 라고 생각하면 쉽다.

 

 

<margin 정렬>

left값을 auto로 풀어주면, 오브젝트 크기를 제외하고 남은 여백을 사용하겠다 라는 의미로 생각하면 좋다.

=> 상위엘리먼트 값을 1200이라고 했을 때, 오브젝트 값이 500이라면, margin의 left여백은 자동으로 700이 된다.

     700의 여백값으로 밀어버리기 때문에 오브젝트는 오른쪽으로 정렬하게된다.

 

중앙정렬 같은 경우, 양쪽에서 밀기 때문에 오브젝트는 중앙으로 밀려난다.

 

 

 

 

 

 

https://codepen.io/hayeong0409/pen/bGZqOJX

도형요소 정렬

 

 

 

 

---

<문제풀이>

 

url.kr/fd7gth

https://codepen.io/hayeong0409/pen/OJqpdpJ?editors=1000

문제

 

 

여는태그와 닫는태그를 이용해서 엘리먼트 구별해놓으면 헷갈리지 않는다.

 

 

한번에 변경하려고 생각하지말고 하나하나 따로 생각해서 정리 먼저 해보기.

내가 정렬하고싶은것 먼저 정리

 

내가 움직이고 싶은 태그 (사진을 가운데로 정렬해야하니까) -> img태그

             => img태그의 display 요소

             =>  inline 요소

inline요소 정렬

       => 텍스트취급 text-align

             text-align은 움직이려고 하는 태그를 감싸고있는 엘리먼트에 적용. 

 

img태그 크기: 250px

img의 상위엘리먼트: .img-box

.img-box크기:?

.img-box 의 display : block 요소

                                     block요소 기본값일 때-> 100%

img-box 상위엘리먼트 aside

aside 크기 300px

.img-box크기 :  100%상속받아 300px

 

너무어려움..