✔ TODAY

오늘은 helbak를 구조를 카피해서 레이어아웃 구조짜는 걸 실습했다. 키즈가오랑 반대의 제작순으로 구성하였다.

✔ 학습한 내용

helbak구조html
helbak구조css

전에 실습했던 키즈가오는 적응형 웹사이트로 제작단계는 pc(미디어쿼리 밖) -> mobile (미디어쿼리 안)순으로 제작하였다.

이번에 실습할 helbak은 반응형 웹사이트로
제작단계는 mobile(미디어쿼리 밖) -> pc(미디어쿼리 안)순으로 제작했다.

즉, 이번 실습은 모바일을 먼저 만든다.

• svg
  이미지만들때 만드는 확장명 실제코드가 테그를 사용해서 이미지를 형성하는 게 일반적.

Defult

css에 디폴트로 입력해야 되는 속성들

*{ 	margin: 0;
   	padding: 0;
	box-sizing: border-box;}

html ,body{
	width: 100%;
	height: 100%;}
body{overflow-x: hidden;
	font-family: sans-serif;
	color: #585858;}

h1, h2, h3, h4, h5, h6, p{
	font-weight: 400;}

li{ list-style: none;}
a{ text-decoration: none;}

img{ vertical-align: middle;}

span{display: block;	}

• *표시
  html, body, h1, h2, h3, p등 태생적으로 마진값을 가진 태그들이 너무 많아, 하나하나 0 넣기가 번거로움이 있다.
  이에 대한 해결법으로, 에 마진,패딩0 넣는다.

  • 모든 html에 적용된다.

• box-sizing: border-box;
  :패딩으로 공간의 크기가 달라지는 것을 방지하기 위해서 박스사이징/볼더박스 적용하는 것이 좋다.

• list-style: none;
  margin:0; 를 입력시 화면에는 li앞의 동그라미가 안보이지만, 이는 사라진게 아니라 화면 왼쪽으로 빠진것으로 속성으로 없애주어야 한다.

• font-weight:
  폰트의 굵기는 100단위로 올라간다. 100~900존재, 올라갈수록 굵기가 굵어진다.

• span:
  스팬태그는 원래 인라인요소를 가지고 있으나 여기세어는 블록요소로 만든다.

header

메뉴버튼

• li에서 flot사용하여 3차원일부를 가지게 되어 부모에게 공간에 대해 영향을 줄 수 없다.
  그래서 위의 nav의 ul 높이 값이 없는 상태.(기본적으로 블록요소를 가지고 있음 - 넓이값이 끝까지 가짐)

즉 , 최종적으로 header의 높이가 h1의 높이로만 인식*
이를 해결하기 위한,

• 메뉴버튼까지 다 인식하기 위한 방법
  ul태그에 overflow:hidden을 넣는다.

• 자식이 3차원 높이 값을 가짐/ 부모가 오버플로우 히든을 넣으면, 부모가 자식의 높이값을 인식할 수 있음을 이용.

#header .buttons .menu-button{
	display: block;

	width: 100%;
	height: 100%;
	text-align: center;}

• 메뉴버튼의 모든영역을 활성화하고자 할때,( 메뉴버튼 모든영역에 손가락이 생기게 )

-이미지는 inline 요소를 가진고,
text-align은 인라인요소만 사용이 가능하다.

• 이미지 y축 중앙 정렬

position: relative; top를 사용하기 위해서
top: 50%;
transform: translateY(-50%);

모바일은 클릭이 쉽지 않기때문에 여유영역도 활성화하는 것이 좋다.
반대로 pc는 클릭이 쉽고, 의도치않은 클릭을 방지하기 위해서 클릭의 범위를 로고로 한정하는 것이 좋다.


미디어쿼리로 pc를 제작시 logo의 영역의 변화가 필요하다.

• position: relative에서 width값을 정확하게 인식할 수 없기 때문에, width값을 명확하게 규정을 해야된다.
  안하게 된다면... 예상치 못 한...출력값이 나온다.

main

• 이미지 공간을 만들어놓은 a태그 들어맞게끔 작업을 해야된다.

• 이미지의 고정값이 있지만 화면의 100% 나오게 다시 설정하기

• a를 실이미지값과 비슷하게 설정 > 이미지를 a 100%으로 설정.

.main-content .product-group-list{
	position: relative;
	display: block;
	/*float: left;*/

	width: 100%;
	height: 56.25%;
	border: solid 10px rebeccapurple ;

	overflow: hidden;
	}

.main-content .product-group-list img{
	width: 100%;
	height: 100%;
}

• 메인과 ul겹쳐서 메인의 영역이 뒤로 가서 가림
  이를 방지하기 위해서
  1) mail에 overflow:hidden을 넣고
  2)미디어쿼리 하나 더 생성해서 padding:top을 넣는 다.

레이어 겹치는 문제를 해결

@media (min-width: 47em){
	.main-content{
		padding-top: 80px;}}

@media (min-width: 60em){
	.main-content{
		overflow: hidden;}

footer

한 태그에서 클래스를 여러개 사용했을때 역활을 구분하면 좋다.

‼ 인라인 블록요소 구분하기

!? span클래스로 색상 구분하기
li nth-child로 색상 구분하기
차이점이 있는지?

• 클래스 입력시,
  클래스간 띄어쓰기가 있는 경우, 부모자식관계
  없는 경우, 부모자식관계가 아님 선택지.

• footer의 padding-bottom

#footer{
	position: relative;
	background-color: yellow;

	padding-bottom: 66px;
}

padding-bottom: 66px의 정체는 footer제일 하단에 나온다.
만약 사용하지 않으면, a태그와 하단의 다른 테그의 레이어 겹치게 된다.
즉, a태그의 공간을 만들기 위해서 벌린 것으로 보면된다.

우선 영역을 하나하나 공간을 만들고 난 후 배치작업을 하는 것이 좋다.

기타 실무팁

id

💥아이디는 하나만!!
하나의 문서안에서 동일한 아이디가 있어서는 안된다.

같은 아이디가 존재해서는 안되는 이유

• a href 안에는 3가지 속성값이 들어갈 수 있다.
  1)인터넷 주소
  2)파일명/html파일문서 문서주소
  3)id속성값

	<ul>
		<li><a href="#one">one</a></li>	
		<li><a href="#two">two</a></li>	

		<li><a href="#three">three</a></li>	

	 </ul>

	 <div id="one">one</div>
	 <div id="two">tw o</div>
 	 <div id="three">three</div>

	 <div id="one">one</div>

li의 one을 눌렸을때, 동일한 아이디=one가 있는 경우 어디로 이동하는가?
가장 상단의 원만 이동를 한다. 잘못된 설계. 타 개발자가 볼때는 혼동만 될 수 가 있다.

즉, a태그에 이동값으로 id을 넣기도 하기 때문에 id는 중복은 html설계상 좋지가 않다.

• 클래스도 가능?
  '파일엑세스없음'으로 나온다.
  즉, a와 클래스는 결합을 할 수 가 없다.

아이디의 속성값은 하나의 문서안에서는 유일해야됨

말 줄임표시

글자가 감싸는 영역을 넣어가면 줄바꿈현상이 일어난다.
이를 해결하기 위해서,

• white-space: nowrap; 입력한다.(nowrap를 감싸지않겠다는 말)

• 넘어가는 거 안보고 싶은면 overflow:hidden를 입력한다.
  그러나 짤린 모습이 보기 좋지가 않다...

• 추가로 text-overflow: ellipsis 입력

이 세가지 속성 모두가 '줄바꿈'효과를 준다.

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

• 말 줄임을 자주 사용할경우
  필요할때마다 코드를 복사+붙여넣기를 하는 것은 쓸데없이 코드양만 늘이게 된다.

• 해당코드를 클래스로 만들어서, 쓸때마다 클래스를 붙여사용!

말 줄임표시 클래스로 사용하기

css를 클래스를 만들어서 html에 추가한다.

.ellipsis{ white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;}

<h2 class="ellipsis">

html문서만 보도 빠르게 파악이 가능하다.( css를 보지 않더라도)
이런 역활을 하는 코드가 굉장히 많음

---

✔ 학습한 내용 중 어려웠던 점 또는 해결못한 것들

• main부분의 html... 너무 당연하게 div태그를 쓸려고 했었다. 한동안 css에 집중해서 html에 부분에 소홀했었던것 같다.
• 레이어겹치는 경우를 사전에 파악하기 힘들었다.

---

✔ 해결방법작성

• velog에서 기록한 html부분을 보고 참고 했다.
• 주말동안 기본적인 부분에 집중해야겠다.
• 이번 실습중에 레이어 겹치는 부분과 해결부분을 정확히 파악하고 그외 사례를 찾아본다.

---

✔학습소감

3일동안의 키즈가오 실습덕분인지, 오류를 찾는 시간이 굉장히 빨라졌다. 코드를 보는 요령이 생긴것 같다. 이번에는 모바일에서 pc로 제작하는 방법을 배웠는데 ...해당 웹사이트 구조가 단순해서 인지,css 문서가 한 개여서 인지 키즈가오보다는 편했다.