고정 헤더 영역
상세 컨텐츠
본문
반응형
오늘은 47일차
3번만 더쓰면 끝나는 챌린지~_~
오늘은 알차게 2개나 들었다
그리고 2개를 동시에 적용해봤다 ㅎㅎ
역시나 왜안나오지 하면서 다하고 찾았더니,, alt에 아무글도 쓰지 않으면 출력되지 않드라구요
꼭 까먹지 않구 쓰기~~
img와 bg차이
: img는 이미지가 출력된 자리에 온전하게 출력된다는 의미
그래서 우리가 별도 설정 없이 주소만 입력해도 잘 된다.
bg는 요소의 크기에 영향을 받아서 삽입된다. 배경으로 이미지를 온전하게 표현하고 싶으면
css에서 가로와 너비를 잡아서 출력하면 된다.
백그라운드 이미지는 마우스로 해당하는 부분을 드래그하면 드래그가 되지 않는다.
*브라우저가 사용하는 이미지라고 인식하지 않기 때문이다.
bg는 이미지 제어가 가능하다.
html
<div class="bg"></div>
<img src="" alt=""/>
css
.bg{
width:300px;
height:400px;
background-color:royalblue;
background-image:url();
background-size:70px;}
(예제는 밑에 한꺼번에 적용스)
google fonts
: 웹에서 사용하기 최적화되고 정량화된 폰트(인터넷의 속도를 많이 받기 때문이다.)
1. 서치에서 폰트 나눔을 검색하기
2. 카드를 선택하고, 폰트 2개 사용하는 것 권장
3. select this style 선택
4. use on the web에서 link rel의 부분을 복사한다.
5. 코드 css부분에서 href="./main.css" 부분위에 복사한거 붙혀넣는다.
(여기까지 안되는 건 선언을 안해서 그렇다.)
6. 다시 사이트로 가서 css family 부분을 복사한다.
7. main.css로 가서 body태그를 만들고 복사한거 붙여놓는다.
8. 옆에 sans-serif;를 가져온다.(고딕체 계열이라는 뜻, 필기체 말고 고딕체로 넣어야 기본글꼴일아 유사하게 나온다.)
* body안에 넣는 것은 상위요소기 때문, 그래야 하위요소에 모두 적용이 된다.
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>glad</title>
<link href="https://fonts.googleapis.com/css2?family=Dongle:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./main.css">
</head>
<body>
<div class="bg"></div>
<p>하프물범</p>
<p>그만 귀여워라</p>
</body>
</html>
main.css
body{
font-family: 'Dongle', sans-serif;
font-size: 40px;
color: dodgerblue;
}
.bg{
width:1920px;
height:400px;
background-color:royalblue;
background-size:70px;
}
오..비쥬얼 코드 복사하면 이렇게 나온다..ㄷㄷ
ㅋㅋㅋㅋ하프물범 사진으로 도배해버리기
비쥬얼코드의 좋은점은 에러가 뜨면 하단에 에러가 어디서 나는지 알려주는
아주 친절한 기능이 붙어있다 ㅇㅅㅇ
내일은 주말이고 내가 회사에서 자신있게
피그마를 써볼게요!!
라고 말헀기 때문에,,한번 연습을 해볼려고한다
실전에서 한번 써야지 확확 늘기 떄문에,,회사에서 피그마 쓴다고 질러버렸다
기획자분 수정이 많은 부분의 컨텐츠 이미지를 피그마로 하기로 결정 ㅋ
(기획자분이 ㅇㅋ했는데 뭔가 미안하기도하고..트렌드에 적응합시다 모두들..)
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
반응형
'UXUI DESIGN > UXUI DESIGN - STUDY' 카테고리의 다른 글
| [UI/UX]패스트캠퍼스 챌린지 49일차 - 코딩의 마무리,,피그마는 음,, (0) | 2022.03.13 |
|---|---|
| [UI/UX]패스트캠퍼스 챌린지 48일차 - 반응형 웹! (0) | 2022.03.12 |
| [UI/UX]패스트캠퍼스 챌린지 46일차 - 이미지 용량 관리, bem (0) | 2022.03.10 |
| [UI/UX]패스트캠퍼스 챌린지 45일차 - 웹 이미지 종류 (0) | 2022.03.09 |
| [UI/UX]패스트캠퍼스 챌린지 44일차 - css filter / 웹 이미지 종류 (0) | 2022.03.08 |
