2020.09.04_css_게시판 목록 만들기

2020.09.04_css_게시판 목록 만들기_정리노트

 

 

바로 네비바 이어서 게시판 목록 css 도 정리!

 

 

 

 

여기서 쓸 클래스와 태그는 post_wrapper, p,img, h1 태그!

 

 

 

 

 

다시 캡쳐했지만,,, 증맬 별거가 없균...

 

일단 하나하나 정리를 또 해봐야겠다!!

 

 

 

 

 

먼저 상자..? 게시글을 꾸며보았다!

 

 

flex를 여기서는 어떻게 썼느냐,

 

 

 

폰트와 자식요소 flex를 준 p 태그

 

 

이렇게 사이트를 실행시키고 개발자 도구를 들어가서 보면 flex 때문에 이쁘게 가로로 p태그들이 공간을 잘 나뉘어 가지게 되었다! 그리고 또 내가 길게 쓴 글도 p태그에 다가 플렉스를 줬기 때문에 비율로 인해 잘 다음 줄로 넘어가게 됨!

 

 

 

relative 는 뭔가 설명하고 싶어서 가져왔는데, 만약 저걸 써주게 되면,

 

 

 

 

 

약간 스크롤이 내려갈 때 상단 고정된, 네비바와 뭔가... 자연스럽게 뒤에 잘.. 되는 느낌이랄까 사실 여기서는 필요 없기 때문에 설명하고 제거.

 

 

 

 

margin 은 상하/좌우 이렇게 2개로 줘서 화면 가운데로 위치하게 하고, 게시물 간격마다 조금씩 띄워줬다..! 이것도 사실 띄울까 말까 고민중이긴 하지만.. 일단 이렇게 써주면 화면 가운데로 위치하게 된다.

 

padding 도 전 게시물에 써놓은 것처럼 상자 안의 공간을 위해 써주었다!

 

margin,padding 차이는 밑의 링크로 가면 됨미다

 

korinkorin.tistory.com/17

2020.09.04_css_네비바 만들기

 

 

다음은 weight 와 height 속성으로 직사각형을 만들어주고

 

 

border 윤곽선을 주었다.

 

border 쓰는 법 : 윤곽선 굵기 /  스타일 / 색깔

 

순서 중요하니 잊지말자!

 

스타일에는 여러 옵션이 있는 데, solid, dotted, dashed, double 등등이 있다! 이중선 윤곽선... 등등 여러 옵션 줘가면서 봐도 될 듯! 

또한, 마진과 패딩과 마찬가지로  border-bottom, border-top, border-right, border-left 를 통해 윤곽선의 상하좌우를 마음대로 바꿀 수도 있다.

 

또한 %와 px을 사용하여 border-radius 속성을 줘서 테두리를 둥글게 만들 수도 있다. 흐어 이건 다음에 쓰게 되면 자세하게 캡쳐해서 포스팅 해보게씀.

 

 

 

 

 

다음은 img 태그! 마찬가지로 크기 지정해서 상자 안에 들어가게 맞춰주고, 

 

float 속성을 주었다.

 

float

 

우리가 위에 flex를 줘서 배치할 수도 있지만, 그렇게 되면,

 

 

 

이렇게 1대1대1로 공간을 나눠가져서 이렇게 배치가 되는게 싫어서 나는 따로 속성을 부여해줘서 

 

 

 

이렇게 오른쪽으로 배치를 해주었다! 오른쪽 살짝 띄워진 것은 아까 패딩값으로 좌우를 40px 줘서 그럼.

 

이렇게 float 는 보통 웹 페이지에서 텍스트와 함께 이미지를 배치할 때 자주 쓰이는 속성 값이다.

 

 

 

float 속성

 

 

inherit -  부모 요소에서 상속

 

left -  왼쪽에 배치. 텍스트는 이미지 오른쪽에 위치함

 

right - 오른쪽에 배치. 텍스트는 이미지 왼쪽에 위치 박스 왼쪽에 위치. 이후 요소에 clear 속성이 있으면 달라짐. 

 

none - 요소를 부유시키지 않음

 

none이 아니라면 display 속성은 무시 된다. 

 

 

left와 right를 통해 지정하게 되면, display는 무시되기 때문에 나는 flex를 제외 시킬 수 있었음 ! 

 

 

 

 

 

마지막으로 h1 태그 얘도 마찬가지로 중앙 정렬과 폰트를 불러온 모습인데, css 가 그래서 참..어려운게 정렬 방법도 너무 많아서 항상 이것저것 많이 해보는 편이다. 여기서 margin을 쓴 것도, 다른 요소들과 정렬이 안 꼬이고 제일 편한 방법이 margin을 주는 것이라서.. 나는 여기서 top과 bottom을 이용해서 서로 요소간의 간격과 함께 가운데로 맞춰 주었다! 

 

 

 

사실 전 포스팅처럼 좌우도 상하 좌우로 margin auto를 뒤에 붙이면 되지만, 이상하게.. 아님 내가 멍청이 인건지

쨋든 잘 안 맞춰져가지고 text-align 속성으로 align-item 속성처럼 텍스트를 수직 가운데 정렬을 맞춰 주었다!

 

 

 

text-align 속성

 

 

left - 왼쪽 정렬

 

right - 오른쪽 정렬

 

center -  중앙 정렬

 

justify - 양쪽 정렬 ( 자동 줄바꿈시 오른쪽 경계선 부분 정리 )

 

 

 

---

 

 

이렇게 뭔가 간단해보이지만..? 아닌가 쨋든 css 는 하나가 꼬이면 다 틀어지기도 하고, 하는 방법이 너무 다양해서 어려운 것 같다. 물론 내가 오늘 만든 css 도 어떻게 보면 하나하나 끼워 맞춘 것일지 모르겠지만, 이렇게 적어 놓으면 다른 곳에서도 쓸모가 많겠디.. 끌끌 오늘 두 번째 포스팅 최종적으로 끝!