대구 AI스쿨 개발일지 ( 7일차 )

박호연·2021년 7월 6일

대구 ai스쿨

목록 보기

7/47

레이아웃수업 마지막날이다. 혼자 독학할때 아리송한 문제들을 제법많이 해소했다. 덤으로
유레카라고 생각될만큼 좋은 flex사이트도 강사님께서 알려주셨다.
내 생각에 레이아웃은 사이트의 배치를 담당하는 분야인만큼 심도있고 탄탄하게 꾸준히 공부해야된다고 생각한다.

1)학습한 내용

웹페이지 만들어보기

html, body{
    margin: 0px;
    padding: 0px;
}
  
ul{
    list-style: none;
    margin: 0px;
    padding: 0px;
}

a {
color: #000000;
text-decoration: none;

}

h3{
    margin: 0;
}
p{
    margin: 0;
}

보기에 간단해 보였지만 생각외로 기본값으로 포함된 margin값이 결과를 엉키게하는 경우가 많았다. 처음에는 html, body값의 margin값만 없앴지만 이후에 ul, a, h3, p도 없애면서 더 깔끔하게 정리했다.

글자의 중앙 정렬을 위해 사용하는 코드

내가 만든 메뉴의 높이값(height)를 정했다면

text-align: center;
  line-height: 50px;

높이값을 정하지 않았다면

Padding : 15px  0

같이 패딩값을주면 높이값이 주어진다.

overflow 복습

메뉴판을 ul,li 로 만들고

li에만 높이와 너비값 배경색을주고 메뉴를 만들었다

하지만 ul 코드에 해당되는 배경색을 지정하고 싶어서 핑크색으로 저장했지만 높이값이 존재하지 않아 눈에 보이지 않는다

float를 사용하면 3차원적인 영향을띄기 때문에 부모에게 상속되지 않는다

이때 어제 배웠던 overflow:hidden 을 사용하면 상속된다.

부자연스러운 메뉴판

메뉴판 테두리에

border: solid 1px black;

값을 줬는데 왜 가운데 두줄은 2px로 겹쳐져 굵어 보일까?

가운에 두줄의 볼더값이 서로 겹쳐져서

1px 로 지정했지만 사실상 겹친부분이 2px이 된것이다.

이때

border-top: solid 1px black;
border-bottom: solid 1px black;
border-left: solid 1px black;

이렇게 따로 저장을 해준뒤 마지막 메뉴의 오른쪽 값은

가상선택자를 사용해서

.menu li:last-child{
    border-right: solid 1px black;
}

이런식으로 가상선택자를 이용해 메뉴판의 부자연스러운 부분을 수정했다..

Vertical-align의 복습

Vertical-align은 인라인 블록 등을 포함한 모든 인라인요소의 수직 정렬을 위해 사용된다.

하지만 블록 레벨 요소의 수직 정렬에는 영향을 미치지 않는다.

vertical-align 속성의 특징

① inline, inline-block 요소에만 적용.

② 요소자체만 정렬, 내용에는 영향을 미치지 않는다 (display:table-cell 요소에 적용할 때는 내용에도 영향)

③ 정렬하려는 요소를 다른 인라인 요소에 상대적으로 정렬 (같은줄에서 인라인 요소의 크기, line-height 설정에도 영향)

vertical-align 속성 값

① baseline(기본값/ 부모요소의 기준선 : 글자의 꼬리부분을 뺀 기준)

② sub / super(부모의 아래첨자 기준/부모의 위첨자 기준)

③ top / bottom / middle(부모요소의 맨 위 / 맨 아래 / 중앙)

④ 길이값-px 등, %(0px=baseline 기준으로 위아래 이동)

⑤ text-top/ text-bottom(부모font의 맨 위/ 부모font의 맨 아래)

네이버에 정리를 잘해놓은 자료를 찾아서 참고할겸 인용했다.

[출처] HTML/CSS/jQuery 17) vertical-align 속성|작성자 블루밍(google w3school 참고)

.kakao-lists li img,
.kakao-lists li .kakao-info {
 vertical-align: middle;
  }
.living-lists .image-link,
.living-lists .info-link {
 display: inline-block;
 vertical-align: middle;
  }