CSS border(테두리)가운데 정렬 , 문단 공백 없애기 ,글자수 제한하기, 이미지 옆에 글 배치하기 (flex)

text-align은 center로 하고 border을 적용시켰습니다. border-style을 double none double none로 하여 왼쪽 오른쪽에는 테두리를 적용시키지 않도록 했습니다. 

그랬더니 원하는 상태가 나오지 않죠. 끝에서 끝까지 테두리가 길게 되어져 있습니다.  저는 글자크기에서 조금만 테두리가 컸으면 좋겠거든요. 

그래서 width를 300px로 설정하고 테두리와 'p'가 너무 붙은것 같아 padding-bottom 10px을 줬습니다. 

그랬더니 text-align을 center로 해도 그것이 무시된체 왼쪽으로 쏠려 버렸습니다. padding-bottom은 적용이 잘되었네요. 

그렇다고 text-align을 적용 안하면 텍스트가 왼쪽으로 쏠려 있습니다. 

고로 img를 center로 배치시키는 방법  

display: block; 

margin-right: auto;

margin-left: auto; 

를 이용했습니다. 

원하는 모습이 나오네요. 깔끔하게 가운데로 배치됩니다. 

그다음 글자수를 제한해 봅니다. li에 적혀있는 글자가 많습니다. 그래서 그런지 flex로 justify-content를 center로 해도 전혀 center가 된 느낌이 들지 않습니다. 

이것도 나쁘지 않지만 이렇게 할 생각은 아니었으므로 

min-width: 30ch;

max-width: 40ch;

를 이용하여 글자수를 제한했습니다. 최소 글자와 최대 글자를 설정했습니다. 

원하는 모습이 나왔네요. 

또 flex를 이용하여 이미지 옆에 글자를 배치하는데.. 또 그 글자는 세로로 배치되길 원해서 

첫 번째 <div>(flex가 적용된) 와 두 번째 <div> 안에 <p>와 <ul>을 배치했습니다. 

그래서 이미지 옆에 이렇게 세로로 글자가 배치됩니다. 

하지만 두번째 <div>를 나가서 첫 번째 <div> 영역에 <p>를 배치하면 세로로 배치되지 않고 이미지와 같은 라인으로 배치됩니다.  

<p>와 <ul>에도 border을 적용시켰는데요. 그런데 서로 떨어져 적용되었습니다. 그래서 이 공백을 없애기 위해 <p>는 margin-bottom 을 0으로 하고 <ul>은 margin-top을 0으로 적용했습니다. 

공백이 쉽게 없어졌습니다. 단, 테두리가 겹쳐져서 두꺼워졌습니다. 

그래서 <p>의 border -style을 solid solid none으로 하여 bottom의 테두리를 없앴습니다.