html / css 프로젝트 1-(1)

https://nonipc.com/entry/%EC%8B%9C%EB%A7%A8%ED%8B%B1-%ED%83%9C%EA%B7%B8semantic-tag-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95

시맨틱 태그(semantic tag) 사용 방법

 

• 가운데 정렬 인라인 요소 : text-align: center / 블럭 요소 :  margin: 0 auto  

개발 진행중

 

float를 쓸 때는 부모요소로 감싸줘야함.

 

그냥 header 안에 div 요소 넣어주면 끝나는 거였음..ㅎㅎ;

 

block요소는 아래로 아래로 공간을 만들고

inline요소는 옆으로 옆으로 공간을 만든다.

h1~h6도 block 요소이다.

---

 

*transform을 이용한 글자 이동방법*

이 방법은 transform의 translate(이동) 속성을 사용하여 처리하는 방법으로 가장 추천드리는 방법입니다.

저도 항상 가로, 세로 가운데 배치되는 레이아웃을 잡을 때, translate를 사용합니다.

부모의 높이나 넓이값이 변경하더라도, 자식은 항상 가운데에 배치되기때문에 유지보수 측면에도 우수합니다.

 

[html]

<div>
	<p>가운데 정렬</p>
</div>

[css]

div{position: relative;/* 부모요소에 relative */
width: 180px;height: 180px;border: 1px solid #dcdcdc}
p {position: absolute;left: 50%;top: 50%;
transform: translate(-50%,-50%) /* 자식요소에 translate 값 주기*/
}

 

.art_head {

  position: relative;

  font-weight: 700;

  color: #333;

}

.place {

  position: absolute;

  left 10px;

  top 10px; 

이런식으로 하면된다.

 

완성결과

 

유효성검사 html,css 모두 통과완료

---

느낀점:

초반에 영역구분을 확실히 잡아야 한다. 

큼직 큼직한것들부터 구색만 완성 한다.

id보다는 class로 디자인을 꾸민다. 

section과 article은 무조건 header태그 하나씩 끼워줘야 됨. section꺼 따로. article꺼 따로.

 

??

글자 크기 맞출 때 폰트 크기는 둘중 뭔지 모르겠다.
1. 기존 숫자대로 맞추는 건지.
2. header 태그 커지는 비율 x 폰트 크기 = 부여 font 값