HTML/CSS) 조금은 많이 어려운..html과 css

1px

• box-sizing을 border-box로 가져가더라도 해당 섹션에서 가장 큰 영역에 border로 선을 그린 후
  하위 영역을 선택한다면 선의 굵기 만큼의 margin이 잡힌다
  슬라이드 배너를 위해 onmouseover 속성을 해당 섹션 최상위 영역에 주면서 해결..ㅠ
• 와 이거 또걸렸다..
  • 이번에는 그냥 onclick 시에만 border: none; 을 주는 방법으로 해결.......ㅜ

작업은 상단의 좌측 영역 -> 하단의 우측 순서로

• 코드와 마찬가지로 영역은 좌->우 , 위->아래 순서로 쌓인다
  작업을 차곡차곡 하면 뒤에 신경 쓸 일이 적다

3차원의 함정

** css를 적용할수록 html이 무너진다면 3차원 속성을 갖는 영역 위주로 살피면 됨

 

• 밸런스 게임
  css의 3차원 속성을 마음껏 쓰려면 html이 기반을 잘 잡아줘야하고
  html을 간결히 하려면 3차원을 적게 사용하는 편이 좋아보인다
• float, absolute 등의 속성을 사용하는 경우 유의점
  3차원과 2차원은 서로 다른 영역에 존재하기 때문에 3차원 영역을 감싸고 있는
  모든 상위 영역의 높이를 잃게된다
• float을 적용받는 마지막 영역 혹은 다음 영역에 clear 적용
  특별한 경우가 아니라면 absolute를 relative로 대체할 수 있다
  relative는 2차원 속성이지만 3차원처럼 사용 가능
• display: flex;
  하위 영역의 크기를 무시하고 모두 한 줄로 정렬
  한 줄에 모든 하위 영역이 들어가야 할 경우 float 대신 사용 가능