[TIL] 210831
📝 오늘 한 것
-
CSS 직접 작성해보기 (이어서)
-
내가 짠 코드와 강의 내용 비교·분석 (이어서)
🔎 강의를 통해 배운 것
1. navbar
-
color
(폰트 색깔) 속성을 #navbar에 지정해서 한 번에 하위 요소까지 전부 적용될 수 있도록 했다.
-
flexbox 교차축 중앙 정렬
→ align-items: center
🔥🔥🔥🔥🔥
-
navbar-menu-item, 즉 <li>
들 사이를 띄우려면 justify-content: space-between 말고 그냥 margin이랑 padding 값을 넣어주면 된다.
-
text-decoration: none
과 list-style: none
처럼 항상 똑같이 적용할 속성들은 매번 class마다 지정해주지 말고, 아예 /* universal tags */
에 a와 li 태그를 명시해서 지정해둬라.
-
구글 폰트를 body
에 지정해줬다.
-
기본적으로 텍스트 위에 마우스 커서를 올려도 그 모양이 변하지 않도록 하기 위해 body에 cursor: default
를 지정해줬다.
-
단, li 위에 마우스 커서를 올렸을 때는 손 모양으로 바뀌도록 cursor: pointer
를 지정해줬다.
-
border-radius는 이 문서 내에서는 항상 동일한 값을 사용할 것이기 때문에 :root에 변수값을 지정해주었다.
-
class="navbar-menu-item active"를 가리키는 CSS 선택자는 navbar-menu-item.active이다. 이 경우에 .active 앞에서 띄어쓰기 하면 안 된다.
-
border-radius 속성은 .active와 :hover에서 반복되므로 아예 .nav-menu-item에 한 번만 써주도록 한다.
2. home
-
원 모양으로 만든 프로필 이미지를 원하는 위치가 보이도록 조정하는 법을 모르겠다. img를 감싸는 div 태그를 만들어서 이미지의 중앙이 보이도록 했으나 내가 원하는 건 이미지의 오른쪽이 보이는 것이다.
-
모든 button에 적용시킬 속성들은 /* universal tags */
에 지정해 두도록 한다.
3. about
-
개발자 도구를 사용해도 그림에 수치는 안 나오면서 요소 검색 시에만 주황색으로 뜨는 margin
의 경우, 해당 요소가 block 레벨 요소이기 때문에 자동으로 margin 값이 설정되어 있는 것이다. 이 경우에는 좌우 margin에 auto
값을 줌으로써 수평 중앙 정렬
을 할 수 있다.
-
/* universal tags */
에 <section>
요소 선택자를 추가해 공통적으로 적용할 속성들을 지정해줬다. 브라우저 창이 커지면 콘텐츠가 너무 퍼지는 것을 막기 위해 지정하는 max-width
도 그 중 하나이다.
-
나는 position과 transform 속성을 이용해서 아이콘(font awesome)을 수직·수평 중앙 정렬시켰는데, 강의에서는 line-height
에 height
값과 동일한 값을 지정해 중앙 정렬시켰다.
-
원 안의 아이템에 마우스 커서를 가져가면 아이템이 커지면서 분홍색으로 바뀌어 돌아가도록 효과를 주었다.
-
a:hover
→ a에 커서를 댔을 때 a
a b:hover
→ a 안의 b에 커서를 댔을 때 b
a:hover b
→ a에 커서를 댔을 때 b
-
--animation-duration: 300ms
를 추천한다.
4. skills
-
max-width
는 모든 section이 아니라 적용하고 싶은 section에만 따로 쓸 수 있도록 section-container
클래스를 만들어 지정해뒀다. skills 섹션의 경우 브라우저 창이 커짐에 따라 배경만 늘어나고 콘텐츠는 일정 크기 이상 늘어나지 않도록 HTML의 #skills 안에 .section-container를 따로 만들어 나머지 콘텐츠를 감싸주었다.
-
.skillset-left / right의 width: 60% /40% → flex-basis: 60% / 40%
-
🙋♀️ 질문
div.skillset 안에 h3.skillset-title이 있다. div.skillset에 color 속성
을 지정했을 때 div.description 안의 span들은 모두 색이 변했는데 왜 h3
색깔은 변하지 않는 걸까? 강의에서도 안 변해서 따로 h3 색깔을 지정해주었는데 왜 이런 건지 모르겠다.
-
나는 calc()함수를 이용해 .skill-value의 width 값
을 각각 class 별로 지정해주었다. 강의에서는 이를 CSS에서 정의하지 말고 HTML 태그에 인라인 방식
으로 적용하였다. (이는 데이터들을 따로 추출해 json에서 관리하도록 하고, json에서 동적으로 받아온 데이터들을 HTML 코드로 변환해 자동 생성할 수 있도록 해준다.)
5. work
-
텍스트를 이미지 중앙에 위치시키고자 할 때, 텍스트가 이미지에 가려서 안 보이면 텍스트에 z-index: 1
을 적용할 수 있다.
-
이미지에 마우스 커서를 가져다 대면, 이미지가 어둡게 변하면서
숨어 있던 텍스트가 보이도록 하는 방법
방법 1 (내가 쓴 방법: 텍스트는 투명도에 영향 안 받음)
.text {
opacity: 0;
}
img:hover .text {
opacity: 1;
background: rgba(0, 0, 0, .7);
}
방법 2 (강의 내용: 텍스트도 같이 투명해짐)
.text {
background: black;
opacity: 0;
}
img:hover .text {
opacity: 0.7;
}
-
나는 버튼에서 hover 상태만 따로 추가했는데 강의에서는 첫 번째 버튼이 아예 선택된 것으로 보이도록 꾸며줬다.
-
나는 버튼의 숫자를 꾸밀 때 원이 제대로 보여지도록 일종의 꼼수로 HTML의 span 태그에 가서 콘텐츠 부분 앞뒤로 & nbsp를 넣었다. 강의에서는 먼저 display: inline-block
을 적용한 후 width와 height
를 지정하고, 숫자를 동그라미의 가운데에 맞추기 위해 line-height = height
방법을 사용했다.
-
나는 버튼의 숫자를 평상시에 안 보이게 하기 위해 font-size: 0을 사용했지만, 강의에서는 opacity: 0
을 사용했다.
-
나는 버튼의 숫자를 평상시에 안 보이다가 마우스 오버 시 보이게끔만 만들었지만, 강의에서는 위에서 아래로 버튼이 내려오는 애니메이션 효과를 추가했다.
-
이미지가 컨테이너보다 커지지 않게 하기 위해 max-width
와 max-height
를 100%로 지정해줬다.
-
나는 project-description을 position과 translate()을 이용해 중앙 정렬 해주었는데, 강의에서는 position과 justify-content를 이용해 중앙 정렬했다.
-
project-title과 project-description 사이에 ::after
이용해서 ㅡ 를 넣어주었다.
※ :after과 같은 가상 요소는 inline 요소이기 때문에 특정 영역을 갖기 위해서는 block 혹은 inline-block 요소로 만들어주어야 한다.
-
project에 마우스 오버 시 project-description이 살짝 올라오는 느낌이 들도록 애니메이션 효과가 나타나도록 해주었다.
-
transform: translateY(10px);
= top: 10px;
6. testimonials
CSS 직접 작성해보기 (이어서)
내가 짠 코드와 강의 내용 비교·분석 (이어서)
1. navbar
-
color
(폰트 색깔) 속성을 #navbar에 지정해서 한 번에 하위 요소까지 전부 적용될 수 있도록 했다. -
flexbox 교차축 중앙 정렬
→align-items: center
🔥🔥🔥🔥🔥 -
navbar-menu-item, 즉
<li>
들 사이를 띄우려면 justify-content: space-between 말고 그냥 margin이랑 padding 값을 넣어주면 된다. -
text-decoration: none
과list-style: none
처럼 항상 똑같이 적용할 속성들은 매번 class마다 지정해주지 말고, 아예/* universal tags */
에 a와 li 태그를 명시해서 지정해둬라. -
구글 폰트를
body
에 지정해줬다. -
기본적으로 텍스트 위에 마우스 커서를 올려도 그 모양이 변하지 않도록 하기 위해 body에
cursor: default
를 지정해줬다. -
단, li 위에 마우스 커서를 올렸을 때는 손 모양으로 바뀌도록
cursor: pointer
를 지정해줬다. -
border-radius는 이 문서 내에서는 항상 동일한 값을 사용할 것이기 때문에 :root에 변수값을 지정해주었다.
-
class="navbar-menu-item active"를 가리키는 CSS 선택자는 navbar-menu-item.active이다. 이 경우에 .active 앞에서 띄어쓰기 하면 안 된다.
-
border-radius 속성은 .active와 :hover에서 반복되므로 아예 .nav-menu-item에 한 번만 써주도록 한다.
2. home
-
원 모양으로 만든 프로필 이미지를 원하는 위치가 보이도록 조정하는 법을 모르겠다. img를 감싸는 div 태그를 만들어서 이미지의 중앙이 보이도록 했으나 내가 원하는 건 이미지의 오른쪽이 보이는 것이다.
-
모든 button에 적용시킬 속성들은
/* universal tags */
에 지정해 두도록 한다.
3. about
-
개발자 도구를 사용해도 그림에 수치는 안 나오면서 요소 검색 시에만 주황색으로 뜨는
margin
의 경우, 해당 요소가 block 레벨 요소이기 때문에 자동으로 margin 값이 설정되어 있는 것이다. 이 경우에는 좌우 margin에auto
값을 줌으로써수평 중앙 정렬
을 할 수 있다. -
/* universal tags */
에<section>
요소 선택자를 추가해 공통적으로 적용할 속성들을 지정해줬다. 브라우저 창이 커지면 콘텐츠가 너무 퍼지는 것을 막기 위해 지정하는max-width
도 그 중 하나이다. -
나는 position과 transform 속성을 이용해서 아이콘(font awesome)을 수직·수평 중앙 정렬시켰는데, 강의에서는
line-height
에height
값과 동일한 값을 지정해 중앙 정렬시켰다. -
원 안의 아이템에 마우스 커서를 가져가면 아이템이 커지면서 분홍색으로 바뀌어 돌아가도록 효과를 주었다.
-
a:hover
→ a에 커서를 댔을 때 a
a b:hover
→ a 안의 b에 커서를 댔을 때 b
a:hover b
→ a에 커서를 댔을 때 b -
--animation-duration:
300ms
를 추천한다.
4. skills
-
max-width
는 모든 section이 아니라 적용하고 싶은 section에만 따로 쓸 수 있도록section-container
클래스를 만들어 지정해뒀다. skills 섹션의 경우 브라우저 창이 커짐에 따라 배경만 늘어나고 콘텐츠는 일정 크기 이상 늘어나지 않도록 HTML의 #skills 안에 .section-container를 따로 만들어 나머지 콘텐츠를 감싸주었다. -
.skillset-left / right의 width: 60% /40% →
flex-basis: 60% / 40%
-
🙋♀️ 질문
div.skillset 안에 h3.skillset-title이 있다. div.skillset에color 속성
을 지정했을 때 div.description 안의 span들은 모두 색이 변했는데 왜h3
색깔은 변하지 않는 걸까? 강의에서도 안 변해서 따로 h3 색깔을 지정해주었는데 왜 이런 건지 모르겠다. -
나는 calc()함수를 이용해 .skill-value의
width 값
을 각각 class 별로 지정해주었다. 강의에서는 이를 CSS에서 정의하지 말고 HTML 태그에인라인 방식
으로 적용하였다. (이는 데이터들을 따로 추출해 json에서 관리하도록 하고, json에서 동적으로 받아온 데이터들을 HTML 코드로 변환해 자동 생성할 수 있도록 해준다.)
5. work
-
텍스트를 이미지 중앙에 위치시키고자 할 때, 텍스트가 이미지에 가려서 안 보이면 텍스트에
z-index: 1
을 적용할 수 있다. -
이미지에 마우스 커서를 가져다 대면,
이미지가 어둡게 변하면서
숨어 있던 텍스트가 보이도록 하는 방법
방법 1 (내가 쓴 방법: 텍스트는 투명도에 영향 안 받음)
.text { opacity: 0; } img:hover .text { opacity: 1; background: rgba(0, 0, 0, .7); }
방법 2 (강의 내용: 텍스트도 같이 투명해짐)
.text { background: black; opacity: 0; } img:hover .text { opacity: 0.7; }
-
나는 버튼에서 hover 상태만 따로 추가했는데 강의에서는 첫 번째 버튼이 아예 선택된 것으로 보이도록 꾸며줬다.
-
나는 버튼의 숫자를 꾸밀 때 원이 제대로 보여지도록 일종의 꼼수로 HTML의 span 태그에 가서 콘텐츠 부분 앞뒤로 & nbsp를 넣었다. 강의에서는 먼저
display: inline-block
을 적용한 후width와 height
를 지정하고, 숫자를 동그라미의 가운데에 맞추기 위해line-height = height
방법을 사용했다. -
나는 버튼의 숫자를 평상시에 안 보이게 하기 위해 font-size: 0을 사용했지만, 강의에서는
opacity: 0
을 사용했다. -
나는 버튼의 숫자를 평상시에 안 보이다가 마우스 오버 시 보이게끔만 만들었지만, 강의에서는 위에서 아래로 버튼이 내려오는 애니메이션 효과를 추가했다.
-
이미지가 컨테이너보다 커지지 않게 하기 위해
max-width
와max-height
를 100%로 지정해줬다. -
나는 project-description을 position과 translate()을 이용해 중앙 정렬 해주었는데, 강의에서는 position과 justify-content를 이용해 중앙 정렬했다.
-
project-title과 project-description 사이에
::after
이용해서 ㅡ 를 넣어주었다.
※ :after과 같은 가상 요소는 inline 요소이기 때문에 특정 영역을 갖기 위해서는block 혹은 inline-block 요소로 만들어주어야 한다.
-
project에 마우스 오버 시 project-description이 살짝 올라오는 느낌이 들도록 애니메이션 효과가 나타나도록 해주었다.
-
transform: translateY(10px);
=top: 10px;
6. testimonials
특별히 없었다. clear.
7. contact
특별히 없었다. clear.
8. 반응형 nav
.toggle-btn
에 position: absolute를 적용한 후right
,top
을 지정해 위치를 조정해주었다.
✨ 내일 할 것
-
미디어쿼리를 이용해 반응형 웹 만들기
-
내가 짠 코드와 강의 내용 비교·분석 (이어서)
-
자바스크립트 입문
Author And Source
이 문제에 관하여([TIL] 210831), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@leesyong/TIL-210831
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
미디어쿼리를 이용해 반응형 웹 만들기
내가 짠 코드와 강의 내용 비교·분석 (이어서)
자바스크립트 입문
Author And Source
이 문제에 관하여([TIL] 210831), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@leesyong/TIL-210831저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)