#mypiRead .mypiReply {
background-color: rgba(255, 255, 255, 0.1);
line-height: 150%;
color: #191919;
}
그림의 최상위 댓글 CSS 바탕이 되는 코드 입니다.
먼저 #mypiRead .mypiReply { -- 이 부분은 mypiRead(게시글본문) 에
mypiReply(댓글)이 달려 있다는 내용입니다.
그 밑으로
background-color: rgba(255, 255, 255, 0.1);
영문 그대로 백그라운드 컬러입니다. 여러 방식이 있지만 투명값이 정용 되는 rgba 방식이
사용 되었어요. CSS3 이후 그러니까 익스플로러11과 크롬 에서 이 명령어가 쓰여서
백그라운드 컬러에 투명값이 적용되어 바탕화면이 보이게 하는 효과를 가져옵니다.
굳이 바탕화면이 안 보여도 상관 없다 하시는 분은 #000000 처럼 RGB 코드를 쓰시거나
white 또는 black 같은 바탕화면 색상 코드를 적으셔도 되요. 이 코드들은 많은 브라우져에서
지원합니다.
다음 코드는
line-height: 150%;
로 글자높이 입니다. 100%로 설정하시면 줄과 줄 사이의 간격이
딱 붙어있는 것을 보실 수 있어요. 적당히 띄어놔야 읽기 편하기 때문에 150% 정도로 설정
다음 코드는
color: #191919;
이 코드는 글자 색상을 나타납니다.
PS. 각 브라우져 별로 적용되는 코드가 있다보니 익스11 이나 크롬 이외의 브라우져에서는
레이아웃이 깨질 수 있습니다. 특히나 투명값 관련 코드 인데요.
저 코드 외에 따로 background: #000000;
이 코드를 한번 더 넣어주면... 투명값 코드가 안 먹을 시에 위 코드가 적용됩니다.
예를 들자면
#mypiRead .mypiReply {
background-color: #000000;
background: rgba(255, 255, 255, 0.1);
line-height: 150%;
color: #191919;
}
이런식으로 적용해서 브라우져별 호환성을 높여주는 꼼수입니다.
이 이외에 반응형 코드를 사용 하는 방법도 있는데(브라우져 별로 CSS 적용하는법)
복잡하니 패스...
이 부분에 대해서는 리플다는 곳 바탕화면 관련한 것이기 때문에 따로 margin이나 padding
적용은 사용 할 일이 거의 없습니다. 굳이 사용한다면 가로길이 width 정도?