의사클래스에 대한 내용정리와 웹폰트, 템플릿 적용에 대한 내용을 다루었다.
1. 의사클래스
: 선택하고자 하는 HTML 요소의 특별한 '상태(state)'를 명시할 때 사용한다.
1) 가상클래스 선택자(동적의사 클래스)
: 링크가 걸리는 <a>태그의 스타일 부여에 많이 사용한다. 일반적으로 <a>태그는 디폴트가 정해져있으나, 아래와 같이 세부설정을 통해 디자인을 적용할 수 있다.
<!-- 링크를 클릭하기 전, 기본상태 -->
a:link {color: orange;}
<!-- 링크를 클릭한 후의 상태 -->
a:visited {color: gray;}
<!-- 마우스커서를 올렸을때의 상태 -->
a:hover {color: blue;}
<!-- 클릭하고 있는 상태 -->
a:active {color: red;}
2) 가상요소 선택자
: 기존에 있는 요소의 전후나, 요소들의 순서 등을 선택할때 보통 많이 사용되는 선택자이다. 원래 요소에 직접 클래스를 부여해서 직접 관여할 수 있으나, 추상적인 표현으로 클래스 부여 없이 사용 가능하도록 한다. 표현이 아주 다양하며, 요소 뒤에 세미콜론 + 지정하는 명령이 있다면 대부분은 가상요소 선택자이다.
① 구조의사 클래스
<Style>
/*지정 순서에 위치한 p태그*/
p:nth-child(순서){
color : red;
}
/*첫번째에 위치한 p태그*/
p:first-child{
color : orange;
}
/*마지막에 위치한 p태그*/
p:last-child{
color : yellow;
}
</style>
..(생략)
<body>
<p>상의</p>
<p>하의</p>
<p>아우터</p>
<p>신발</p>
</body>
② 내용 자체에 관여하는 선택자(::before / ::after)
<Style>
/*p태그 내용전에 삽입*/
p:before{
content: "▶모든 p태그 이전에 삽입할 내용";
}
/*p태그 내용 직후에 삽입*/
p:after{
content: "모든 p태그 이후에 삽입할 내용◀";
}
.wrap:after{
content: "▶wrap 클래스 이후에 삽입할 내용◀";
color: pink;
}
</style>
..(생략)
<body>
<div class="wrap">
<p>상의</p>
<p>하의</p>
<p>아우터</p>
<p>신발</p>
</div>
</body>
2. 웹폰트
: 웹상에 존재하는 폰트를 가져다 사용하는 것으로, 폰트를 다운받고 해당 폰트를 폴더에 담아서 사용하는 방법, 링크로 연결하여 적용하는 방법이 있으며 해당 포스팅에서는 후자에 대한 내용을 다룬다.
① "웹폰트" 검색하여 링크 찾기
: 아래는 구글 웹폰트 링크 접속 화면이며, 언어마다 폰트의 적용이 상이하기에 사용할 언어에 맞춰 검색한다.
② 다운or링크 적용 선택하기
: 처음에 설명한대로 다운로드를 하게 되면 컴퓨터에 폰트를 저장하여 사용하는 방식이고, 우측상단의 버튼을 누르면 링크로 폰트의 적용이 가능하다.
③ 적용하기
: 아래의 빨간 네모 박스를 각각 복사하여 사용하면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dokdo&display=swap" rel="stylesheet">
<style>
*{
font-family: 'Dokdo', cursive;
}
</style>
</head>
<body>
<p>글씨체 진짜 웅장하다..</p>
</body>
</html>
3. 템플릿
: 레이아웃과 CSS의 적용이 완료되어있는 템플릿의 배포가 적지 않은 상태이다. 직접 만들지 않고 템플릿을 적용하게 되면 레이아웃과 디자인에 쏟을 시간을 단축할 수 있으며, 어쩌면 본인이 한 것 보다 더 좋은 아웃풋을 낼 수 있다. 템플릿의 적용 방법에 대해 정리하였다.
1) 템플릿 탐색
키워드는 "웹 반응형 템플릿"으로 하여 구글링 하다보면 여러 종류의 템플릿 공유 사이트를 확인할 수 있다.
그 중 수업중 강사님께서 추천해주신 링크를 아래에 첨부해보았다.
HTML5 UP
Responsive HTML5 and CSS3 site templates designed by @ajlkn and released under the Creative Commons license.
html5up.net
2) 템플릿 적용
상단에 첨부된 링크주소 기준으로 적용에 대해 설명 하였다.
우선 원하는 템플릿을 선택하여 다운로드를 받고, 해당 zip파일을 압축해제한다.
그리고 txt파일(템플릿 설명)을 제외한 폴더파일과 html파일을 webapp에 드래그&드랍으로 복사한다.
① webapp에 드래그&드랍
② 드랍 완료 후
package Explorer을 통화 확인하면 webapp 안에 폴더와 파일이 잘 담긴 것을 확인할 수 있다.
3) 템플릿 가공
템플릿을 복사해왔다면, PPT템플릿을 사용할때와 마찬가지로 내게 필요한 형식에 맞춰 수정하는 작업이 필요하다. CSS파일에 접근하여 색상을 변경한다던지, html파일에 필요없는 section을 삭제한다던지, 이미지와 텍스트를 추가, a태그 경로의 변경 등 원하는 입맛대로 차분하게 수정해 나가면 된다.
본인이 다운받은 템플릿을 수정한 결과를 사진으로 첨부하였다. 페이지의 수가 여럿인 관계로 index화면만 첨부하였다.
* 템플릿 기초상태 *
* 수정 후 *
한시간 반 정도의 시간동안 실습을 통해 페이지 전체 색상, sideBar수정, 이미지 변경, <a>태그 경로 수정, 버튼 value수정 등 여러 부분을 수정하였다.
아래는 잘 어울리는 색상 뽑는 사이트로, 양 페이지 사이의 네모버튼을 클릭하면 색상 정보가 복사된다.
Two Color Combinations
Two color combination palettes
2colors.colorion.co
'HTML & CSS' 카테고리의 다른 글
| [CSS] Display속성_float, flex, grid (0) | 2022.02.11 |
|---|---|
| [CSS] 여백관리 & 애니메이션효과 & 반응형 웹 (0) | 2022.02.10 |
| [CSS] 기초_문법 & 적용 & 기본속성 & 선택자 (0) | 2022.02.08 |
| [HTML] 요소 : 태그 (0) | 2022.02.08 |
| [HTML] table활용_회원가입 (0) | 2022.02.04 |
