HTML5와 CSS를 사용해서 간단한 메인 페이지를 만들어 보았다!
(전체적인 메인 페이지 + 곱하기 그레디언트 + 마우스 롤오버 기능 정도만 적용 시켰다)
▼ 작성하면서 함께 메모한 것들) 배운 것, 다시 정리한 개념들, 궁금증에 대해
1) 최소한의 Reset CSS 을 설정하고 시작한다.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}1-1) 직관적인 box model을 위해서 box-sizing: border-box; 을 사용한다.
2) VScode의 emmet기능
.container + tab = <div class="container"> </div>
- h1>a = <h1><a href=""></a></h1>
- ul>li*5>a = ul밑에 li태그를 다섯개 a태그로 연결해서 만들기 →
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>3) link의 rel 에 대한부분
<link>태그의rel속성은 현재 문서와 외부 리소스 사이의 연관 관계를 명시한다.rel속성은<link>요소에 반드시 명시되어야 하는 필수 속성이다.
<link rel="속성값(여기서는 stylesheet)">
속성값의 stylesheet는 스타일 시트로 사용할 외부 리소스를 불러온다는 의미이다.4) linear-gradient
- CSS그레이디언트 사용하기 . 배경처럼 image를 사용하는 곳에는 어디에나 사용가능하다. 그레이디언트는 선형, 방사형, 각진원형 세종류가 있다.
- rgba 는 a값을 설정하여 투명도를 조절할 수 있다.
R 레드 [0~255]
G 그린 [0~255]
B 블루 [0~255]
A(alpha) [0~1]ex) .simple-linear { background: linear-gradient(blue, pink); } 원한다면 색상을 계속 추가할 수 있다 (최소 두가지 이상)
- ❓ 백그라운드 컬러와 오퍼시티를 따로 이미지 위에 입힐 수도 있지 않을까 생각되어 각각따로도 주어보았는데, 그럴경우 백그라운드 컬러는 이미지 밑에 깔려서 보이지 않았고 전체적인 사진 이미지의 오퍼시티가 낮아지는 결과를 초래했다.🥲
- https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Images/Using_CSS_gradients
5) vw 와 vh 단위
- ( poiemaweb 참고)
6) margin: 0 auto;
- 대표적인 중앙정렬 속성이다.
margin:0 auto;는 위아래 여백이 없고 가로로는 중앙에 배치되는 기본 서식이다.- 원래 margin: left auto; margin right auto; 를 적어야하는데 이렇게 한번에 지정하는게 더 컴팩트하다. (여기서는 margin-top, margin-bottom이 0이어도 상관 없기때문)
- 여기서 '0'값은 위 아래 여백을 주지 않는다는 의미이다.
- 만약 내가 margin:100px auto; 로 지정한다면 100px은 위아래 여백이 되고, 좌우 여백은 균등하게 분배되어 중앙에 배치될 것이다.
7) .container .header
.a .b .c{}
: 공백으로 연결해서 사용하면 뒤에 나온 선택자가 하위 개체로 지정된다. 즉 a요소 내부의 b요소 내부에 있는 c요소에만 적용이 된다. (그렇기에 내가 작성한 코드를 보면.container안의.header는 영향을 받지만.container안의.school는 영향을 받지 않았다.)- 추가로 선택자부분에서 다중조건 선택자로 정리했던 내용을 보면
.a.b.c{}다중 조건 선택자 'and'
.a, .b, .c{}다중 조건 선택자 'or' 이 있다. .container .header h1 a {}는 컨테이너 밑의 해더 밑의 h1 밑의 a 태그!
8) display:flex 와 justify-content
. container . header { justify-content: space-between; }을 사용했는데 이것은 요소가 좌우 끝으로 붙어서 정렬이 될 수 있도록 지정한다. 즉 header라는 클래스 아래에'h1'과'nav'두개의 영역 중 첫번째인 h1은 좌측 끝, 뒤의 nav는 우측 끝으로 붙인 것이다.- justify-content: flex-start; : 좌측 기준 정렬 (기본값)
- justify-content: flex-end; : 우측 기준 정렬
- justify-content: center; : 중앙정렬
- justify-content: space-between; : 첫번째와 마지막 flex item은 좌우측 정렬, 나머지는 균등 정렬
- justify-content: space-around; : 모든 flex item 균등 정렬
9) nav 태그 꾸미기
display: inline-block;으로 nav의 메뉴들을 가로로 정렬했다.
block; 으로 지정했더니, 한줄로 나란히 세로 정렬되었다..margin:0 10px;로 지정하여 그들 사이에 간격을 줬다.
10) align-items (아이템 정렬)
align-items: center;로 바꾸어 높이 80px기준 요소가 항상 중앙으로 오도록 설정했다.
▼ 아래는 내가 블로그에 정리했던 아이템 정렬에 관한 내용
justify-items은 아이템 가로축 정렬방식을 지정한다.
:justify-items: end;처럼 사용가능하다. (start, end, center, stretch)align-items은 아이템 세로축 정렬방식을 지정한다.
:align-items: start;처럼 사용가능하다. (start, end, center, stretch)
11) hover 기능 사용
- a:hover { color:rgb(100, 180, 180); } 로 사용했다. background-color 등 사용가능하다.
12) position: absolute;
백그라운드 포지션은 정리내용에 있는데, 따로 css포지션은 정리하지 않았던 것 같다.
- CSS
position속성은 문서 상에 요소를 배치하는 방법을 지정한다. - position: static (기본값) : 차례대로 왼-오, 위-아래 로 쌓인다
- position: relative : 좌우측위아래 속성을 사용해 위치 조절 가능하다.
- position: absolute : 부모 엘리먼트 내부에 속박되지 않고, 독립된 배치 문맥을 갖게 된다. 단 상위 엘리먼트 중 position 속성이 relative
인 엘리먼트가 있다면 해당 상위 엘리먼트 기준으로 offset(상하좌우)이 적용된다.❗️ 마지막 특징이 헷갈려서 참고한 글
https://www.daleseo.com/css-position-absolute/
13) .container 의 .school (school은 내가 지정한 클래스명)
선택자(.container .school)에 해당하는 요소는 항상 화면의 정중앙에 위치할 수 있도록 설정.
- left : 50%, top: 50% 만 쓰면 시작 지점이 이동된 거고, 요소 자체는 중앙에 있지 않다. transform 으로 요소 사이즈 만큼 반대로 이동시켜서 완전히 중앙으로 만들기 위해 translate(-50%, -50%)를 주는 것이다.(이것은 개체의 넓이와 높이만큼 50% 반대로 이동하는 원리이다.)
❗️translate -50% 원리가 헷갈려서 참고한 글
https://myhappyman.tistory.com/163
14) <h1><a href="#">HOGWARTS</a></h1> 중 '#' 은?
a 태그는 herf 속성을 필수로 사용해야 하는데 대상경로가 명확하지 않을때 빈 링크로 #을 임시로 쓸 수 있다.
15) button 효과
cursor: pointer;
: 커서를 가져다 대면 커서모양이 변경된다. (물음표 모양이라던지, 확대 아이콘이라던지 모양 종류가 몇가지 있다.)transition
: transition은 속성을 서서히 변화시키는 속성이다. 마우스 오버 시 백그라운드 색상이 바뀔 색상을 적고, 시간등을 설정한다.
CSS에서도 셀렉터를 정리하는 리팩토링이 있을까..?🤔
+) 시맨틱 태그로도 작성을 해봐야겠다!
