hover 스타일 속성은 마우스 커서를 가져다댓을때 변하도록 적용되는 속성으로 어떤 태그나 클래스에 커서가 갔을때 적용되도록 설정한다. hover를 적용하는 위치도 중요한데 경로와 위치를 잘 설정해주어야 한다.
ex : .list:hover .txt{} - list 클래스를 선택시 변화되어 txt가 보인다.
.list a:hover{ color : #fff } - a 태그에 커서를 대면 설정한 속성(color -#fff)으로 변화한다.
아이콘을 적용하는 방법
1. svg로 저장(이미지 : 수정시 피그마나 따로 변경 프로그램으로 해야함, html code : 색상변경등 유동적이다.)하여서 가져오기 - 용량이 작고 어떤 디바이스든 형태가 잘 유지된다.
2. web font (font는 기본적으로 백터방식) 로 불러오기 (pc는 괜찮지만 스마트폰의 해상도는 다양하고 작은 이미지로 나오기 때문에 깨질수도 있다.)
3. png로 저장하여 불러오기
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
웹 폰트 사이트 (아이콘 사용시 유용)
코딩에서 주로 사용되는 것은 웹전용이기 때문에 웹 전용으로 다운 받아서 필요한 부분만 사용한다.(현재 필요한건 css와 웹폰트이기 때문에 해당 폴더만 찾으면 된다.)
이후 원하는 소셜 아이콘을 검색해 찾아준다. 해당 svg를 불러오게 되면 굉장히 크게 보여지는데 이때 폰트로 불러와서 속성을 지정하면 원하는 방식으로 색 혹은 디자인이 가능하다.
폰트를 설정하기 전 구조를 먼저 작성한다. (주로 ul>li>a 구조로 작성이 된다.)
html 형식으로 받아오게 되면 태그에 클래스가 적용된 형식으로 불러와지고
작업중인 폴더에 해당 폰트를 찾아 넣어주고
해당 css를 불러내어 font-face를 가져와서 적용할 css에 넣어준다.
적용하고자 하는 폰트의 class가 fa-brands 이기 때문에 해당 폰트를 불러와 주고 링크로 이어서 넣어주면 된다.
이미지로 보이지만 이는 폰트이다. (i태그로 이엇기 때문에 기울어서 나오는것이다.)
임의의 자손 선택 속성 특수 문자로 만들어 놓은것이다. 여기엔 모든 브랜드 아이콘이 나와있기 때문에 필요한것만 가져와 쓰는것이 정리에도 좋다.
위와 같은 방법이 가능은 하지만 파일 크기가 너무 커지기 때문에 새롭게 css파일을 만들어서 필요한 것만 불러올수도 있다. 각각 폰트의 클래스를 가져와서 복사 하고
ctrl + f 를 눌러 서치창을 열어 ctrl + v 하여 해당 클래스를 넣어 검색해준다. 원하는 폰트만 붙여넣어 새로 만든 css에 붙여 이어주게 되면 해당 폰트만 불러올 수 있게 된다.
보이는 것은 이미지 이지만 폰트이기 때문에 스타일을 넣거나 색, 크기등을 지정할 수 있다.
이미지로 되어 있는 폰트이기 때문에 접근성에 문제가 생길 수 있기 때문에 <span> 태그를 사용해서 텍스트를 넣어주고 span 태그에 blind 클래스를 지정해서 웹상에서는 보이지 않지만 파일에선 존재하고 리더기가 읽을 수 있도록 설정하면 접근성 문제를 해결 할 수 있다.
따로 작성한 font css파일은 앞서 제작한 css 파일에 @import url(././0000) 로 불러오는것도 가능하다.
(이때 주의할 점은 내가 작업한 css파일이 웹 폰트 호출보단 아래에 있어야 한다.)
form 태그
내용을 묶어서 보내기 위해서는 폼으로 감싸주어야 한다.
구성 요소
주로 인풋태그 사용
인라인 태그에 해당
action = ".php/ .asp/ .jsp"
method = ""
name - 내용이 전송될떄 붙는 이름
size - px 가 아니라 몇자 이상이 들어간다는 말
maxlength - 몇자 이상 들어갈 수 없음을 설정 (위는 8자 이상 안된다는 의미)
vlaue - 변수 값 (반환되거나 바꿀수 있는 값) _ex: 아이디를 입력하세요. 하지만 누른다고 값이 사라지진 않는다.
piaceholder - 값이 입력 되어 있지만 변환된다. _ex: 아이디를 입력하세요. 누르고 값을 입력하면 해당 내용이 사라진다.
input type - text - 내용 입력 / - passward - 비밀번호 입력
txt<input type="radio" name="전송될 이름" value="yes" checked>
type="radio" - 선택 속성
name=" " - 전송될 이름
value="yes" - 전달값
checked - 해당 폼에서 미리 체크 하고자 한다면 이를 넣고 투표 같은 폼을 작성할때는 빼는게 좋다.
'기록 > 수업정리_html' 카테고리의 다른 글
| 반응형 (0) | 2024.07.04 |
|---|---|
| Grid (0) | 2024.07.02 |
| position_sticky (0) | 2024.06.19 |
| position 활용 (0) | 2024.06.18 |
| 사이트 제작_html, position 속성 (0) | 2024.06.17 |
