https://pensive-kowalevski-fdf325.netlify.app/
Final Project
address Samseong-ro, Gangnam-gu, Seoul, Republic of Korea
pensive-kowalevski-fdf325.netlify.app
헤더
메인
섹션
-about me
-What i do ~~
아이콘 폰트 사용
외부 스타일 시트 방법
1. 프로젝트 폴더
2.index.html 파일
3. 외부에 style.css 파일
4. 외부에 javascript 파일
5. images 폴더 생성 (다른 폴더 사진 ./)
1.HTML 코드 작성하기
header 태그
nav 태그
ul li태그
2. CSS 작성하기
* flex
f12 elements 에서 flex 눌러보면됨
3. 메인영역 만들기
+ 아이콘 폰트 (cdnjs.com -> font-awesome)
copy link tag
(https://fontawesome.com/icons 여기가서 긁어오면됨 )
속성이 폰트이므로 폰트 속성 수정하면 같이 바뀜
폰트수정하기
fonts.google.com
이미지안나옴
줄띄기안됨
flex 이해안됨
section .about-self::after
마지막에 실행됨.
----------------------------------
몰랐던 내용 정리하기
<CSS>
1.
a는 앵커태그임. a랑, 방문한적없는 링크, 방문한 링크 선택함.
(a 만 선택하면 방문한적있는 링크에 대해서 설정할 수 없음)
-> 디자인상 색과 밑줄 등이 표시되지 않도록 설정함.
2. 띄어쓰기= 후손 선택자
선택자A 선택자b // 선택자A의 후손인 선택자B 선택
<선택자 띄어쓰기 예시>
/*1번*/
.box #name {
font-size: 30px;
}
/*2번*/
.box#name {
font-size: 30px;
}1번 css 코드는 제대로 적용되지만, 2번 css 코드는 적용되지 않습니다.
띄어쓰기 때문인데요.
1번 코드는 .box 클래스 안에 있는 id가 name인 자식 태그를 선택합니다.
2번 코드는 .box 클래스이면서 id가 name인 태그를 선택합니다.
3. rem : 글자크기를 html 요소의 몇배인지! 로 작성
+ width: %로 쓰면 편하다. 3개면 30% 5%(빈공간) 30% 5%(빈공간) 30% =100% 이런식 !
4. @-규칙 : 스타일시트 내부에서 특정한 규칙을 표현하는 데 사용
ex> @media : link 태그에 입력해서 해당 미디어 쿼리 조건에 맞는 장치에서만 CSS 파일을 불러올 때 사용
@media screen{
body{background-color: red;}
} @media print{
body{background-color: green;}
}
모니터(screen)에서는 red, 프린터(print)에서는 green출력
ex2> @keyframes : CSS 내 애니메이션을 정의할 때 사용
0%, 50% 100%는 애니메이션을 정의하기위한 값. 0이 시작이고 100이 끝점임.
upDown 은 0%일때 1, 50%일때 1.5, 100% 일때 1로 돌아와서 위아래로 움직인다.
blink 0%일때 불투명도1 100% 불투명도 0 => 깜박거린다.
5. alt 이미지 태그내에 있는 alt 속성은 해당 경로에 이미지가 존재하지 않거나 엑박이 뜰 때 이미지 대신 보여지는 텍스트
6. 가상요소
가상 요소(virtual element)는 CSS에서 문서의 특정 부분에 스타일을 적용하기 위해 사용되는 요소입니다. HTML에 직접적으로 존재하지는 않지만 CSS를 사용하여 생성할 수 있습니다.
일반적으로 가상 요소는 ::before와 ::after 두 가지가 있습니다.
- ::before: 선택한 요소의 내용(content)의 앞에 콘텐츠를 생성합니다.
- ::after: 선택한 요소의 내용(content)의 뒤에 콘텐츠를 생성합니다.
::after 사용하는 이유
section .do-me::after는 보통 clearfix 기법을 구현하기 위해 사용됩니다.
Float 속성이 적용된 요소들은 부모 요소의 높이를 영향을 주지 않는 경우가 있습니다. 예를 들어, 자식 요소들이 모두 float 속성을 가지고 있을 때, 부모 요소는 이들을 감싸는 데 사용되는 콘텐츠의 높이를 인식하지 못하고, 일반적으로 부모 요소의 높이가 0이 될 수 있습니다.
이러한 문제를 해결하기 위해 Clearfix 기법이 사용됩니다. Clearfix는 부모 요소에 적용되어 부모 요소가 자식 요소의 높이를 올바르게 계산하도록 도와줍니다. ::after 가상 요소를 사용하여 이 기법을 구현할 수 있습니다.
따라서 section .do-me::after는 부모 요소인 section 내에 있는 .do-me 클래스를 가진 요소의 뒤에 가상의 요소를 추가하여 부모 요소의 높이를 정상적으로 계산하도록 하는 것입니다. 이는 보다 일관된 레이아웃을 구현하는 데 도움이 됩니다.
'Javascript' 카테고리의 다른 글
| 7. javascript 클래스 고급기능(private, getter setter, Static, 오버라이드, toString) (0) | 2024.03.12 |
|---|---|
| 6. javascript 6 (예외처리, Class) (0) | 2024.03.11 |
| 5. javascript 5 (0) | 2024.03.08 |
| 4. javascript4 (0) | 2024.03.07 |
| 3. javascript3 (0) | 2024.03.06 |
