[DAY11-1]_개발일지: 웹페이지 제작 ①,②

0. 목차

1. 웹페이지 제작①
2. 웹페이지 제작②

---

1. 웹페이지 제작①

목차로 돌아갓!

---

• 페이지①
  

  → 메뉴바에 마우스오버 할 때, 글자색도 같이 바뀌는 코드
  

 .menu li:hover{
  border-top: 1px solid red;
  background-color: rgba(255,255,255,0.3);
  }

 .menu li:hover > a {
  color:red;
  }

---

• 페이지②

→ display:block 으로 인하여 li 태그가 화면의 너비를 모두 차지해버림
→ 이를 해결하기 위한 코드이자 태그는 '<div>' 이다. ( 화면을 먼저 크게 분할해서 그 안에 해당 부분을 넣어야 함)

---

• 페이지③

  

  → span 태그는 'inline' 속성 / h1, p 태그는 'block'
  : span 을 block으로 사용하려면 display:block
  : span의 너비와 높이를 조절하면서 block 처리 하고 싶다면 display:inline-block

  → 화면 밑에 버튼 집합 들의 배치는 다음 코드로 진행된다.
  

  .btn-wrap{
   display: flex;							# 버튼을 가로 중심축을 기준으로 왼쪽에 순차대로 배열
   justify-content: space-between;		# btn-left-wrap, btn-right-wrap 을 양쪽 끝으로 배치
   }

  ---

2. 웹페이지 제작②

목차로 돌아갓!

---

• 페이지①

→ float:left를 사용해서 거의 대부분의 레이아웃을 구현하였는데
: 최상단 li 태그에 적용
: 가운데 section의 nav 태그에 적용 ( width : 25% )
: 그 다음 오른쪽 section의 내부 태그에도 적용 ( width : 75% )

→ 그리고 위와 같이 clearfix 클래스를 적용한 div를 작성하고,

.clearfix{
   clear:both;
}

→ float 설정을 초기화 하였는데, 다음과 같은 방법도 있으니 참고 할 것
IF) .column 의 float 설정을 초기화 한다고 하면

.column::after {				
	content:""
   clear:both					# 가상 선택자 ::after를 적용하면 float 초기화 가능!!!
}