2024년 4월 11일 CSS-Layout

오늘은 레이아웃 관련된 내용을 배울꺼야 레이아웃이라고 하면 기본적으로 글자의 정렬이나 배치를 말하지

그래서 오늘도 이미지를 삽입을 할껀데 이미지의 구조를 다양하게 변경하는 걸 해볼꺼야

 

 

1. z-index

1번째 박스부터 해서 픽셀값별로 위치를 정해줬어

 

2. float

첨에 이미지 옆에다가 글자를 적으면 이미지 아래 옆쪽에 새겨(?)지는데 

이미지에다가 float속성을 사용해주면 왼쪽, 오른쪽에 붙일수 있다는거지

 

또 다른 방식으로 해보자면

기본적인 태그들을 적어줬어 그럼 하나씩 속성들을 쓰면서 알려줄께

왼쪽부터(div, box1, box2)

전체적으로 div태그를 사용해서 여백을 줘서 간격을 벌려주고 float를 사용해서 색깍을 입히고 다음 요소가 끌어올려지지

마지막 박스4는 right를 적용시켜줘서 맨 오른쪽에 붙었어

 

3. clear

몸통에 div태그를 줘서 p태그 3개의 각각 번호를 입혀서 적어줬어

그럼 첨 상태는 이렇게 보이겠지?

몸통 전체에 마진을 위아래 20 양옆에 30씩주고 가로 길이를 최대 800까지 줬어

p태그에 있는 글자들을 중앙으로 정렬시켜줬어 그리고 이제 각각의 p태그에 속성을 넣어줄꺼야

첫 번째 p태그에 적용시켜줬어

다음에는 이걸 활용해서 2단 레이아웃을 만들어볼꺼야 외부스타일을 적용해서 해볼꺼야

 

4. n단 레이아웃

이렇게 4개의 메뉴를 만들어볼꺼야

한 번 해보고 싶으면 해보면 좋을꺼 같아 못하겠으면 아래보면서 천천히 와봐 

처음에는 이런 모양이겠지? 여기서 외부스타일을 사용해야되니까 css파일을 따로 만들어서 스탕일링을 해줘야겠지?

먼저 div로 하나의 박스를 만들어서 길이를 정해줬어 header태그 안에있는 제목을 설정해줬어 그냥 계속 했던거

다음은 3단 레이아웃을 해볼껀데

 

이런식으로 해보는거야 이것도 해볼꺼면 해봐 해보고 밑에서 봐봐 이번에는 그냥 올려줄께 설명없이 구조는 똑같아

 

이제는 다단레이아웃에 대해 알아볼꺼야

스타일링을 하기 전에는 이런 상태겠지?

요렇게 여백을 다 지워줬어 요소별로

가운데로 맞춰줌

justify를 사용해서 양쪽정렬을 사용 테두리랑 색깔 입혔고

컬럼별로 개수를 나누고 간격을 나누고 점선으로 구간을 나누어줬어

마지막으로 편집해제해서 가운도로 정렬시켜주기

 

5. 플렉스레이아웃1

테두리를 만들어서 세 개의 박스를 수평정렬(가로로 정렬)해주기 기본값 세팅해주면

기본값: nowrap

flex-wrap: wrap; 속성 사용

flex-wrap :  wrap ;

공간을 넘어갔기 때문에 다음 줄로 넘겨졌어

reverse를 사용

reverse를 사용해주면 거꾸로 위로 올라가지

 

그리고 flex-direction row도 기본값으로 적용되서 nowrap이랑 같은 결과가 나오니까 확인해보면 되고

여기에 reverse를 사용해주면 321이런식으로 결과가 나오거야

column을 사용하면 세로로 정렬이 이루어지기 때문에 세로로 채워지고 박스의 높이를 설정을 안했고 마진도 자동이기때문에 박스끼리 붙어있고 숫자의 크기에따라 변하는거지

 

6. 플렉스레이아웃2

이번에는 flex속성에 요소들의 정렬방식(배치)을 설정 해볼꺼야

기본적인 구조를 구성해보자 여기에 스타일링을 줘볼께 그전에 4번에 사이즈를 늘려줬어

테두리 만들고 색상만 입혀줬어

박스에 색상 입힌 모습이야

기본값 적용시켜서  왼쪽부터 배치되고있어 end를 적용시키면 반대에서 부터 배치되겠지

왼쪽과 오른쪽을 벽에 붙이고 간격주기

간격을 주긴하나 왼쪽 오른쪽이 떨어져있음

수직방향 정렬이기 때문에 아래쪽이 아니라 옆쪽 가운데에 정렬이야

order를 사용해서 순서를 변경

 

7. 플렉스레이아웃3

초기상태 >>> 테두리생성(.wrapper)

수평정렬 후 공간부족 시 다음열로 넘김

위에서 했던 justify랑 똑같다고 보면 될거 같아 수직방향 정렬을 설정한다고 생각하면 될거같아

 

8. 미디어쿼리1

이건 미니멈 사이즈가 800px일 때의 배경색을 정해주는거야 

 

9. 미디어쿼리2 

이번에는 이런걸 활용해서 모바일화면 >> 태블릿 >> pc화면까지 만들어볼꺼야

일단은 sns를 인질(?)로 잡아와서 실험을 할꺼

이건 직접해보는게 좋을거같아 모바일버전으로 해봐서 어떻게 나오고 태블릿은 어떻게 pc는 어떻게 나오는지

직접 보는게 나을거 같아

 

오늘도 이걸로 끝