portfolio|Google website

셀라문·2022년 2월 9일
0

아주 조금 많이 부족한 첫 포토폴리오 google 홈페이지

https://Google-Website.yangsera.repl.co
모바일 x..




만들기 위해 공부한 거 대충 끄적끄적

아이콘 이미지 링크 : https://fontawesome.com/

저 사이트에서 이미지를 가져오기 위해서, head 태그 안에

<script src="https://kit.fontawesome.com/dab690a483.js" crossorigin="anonymous"></script>  
입력

website 만들 때, body를 3개로 나눠서 하였는데

첫 body에 float:right;를 적용 후

두번째 body에 margin-top:300px;를 적용하니 첫 body가 딸려 내려오게 된다.

내가 만든 website에서 오른쪽 마우스 클릭 ->검사를 누르고
뜬 창에서 밑에서 body를 누르면 element.style이 보이는데
여기에 display를 치고 오른쪽에서 고르다보면 contents에서 원하는 답을 찾을 수 있다.

해결: css에 body{display:contents;}를 적용하면 된다!

⊙ 맘에 드는 스타일의 CSS가 궁금하다면?

오른쪽 마우스 -> 검사 -> 왼쪽위버튼(selector)로 선택 -> 원하는 곳 클릭 -> style 클릭

⊙ hover가 궁금하다면?

해당되는 HTML 부분 오른쪽 마우스 -> 강제상태(focus state) -> hover 선택

⊙ input box 꾸미기

  1. 모서리 둥글게 만들기

    {border-radius:~px;}

  1. 선두께, 스타일 그리고 색

    ex) {border: 1px solid #dfe1e5;}

⊙ 아이콘 input box 안에 넣는 법

왼쪽에 있는 아이콘 : {position:relative; left:40px;}

오른쪽에 있는 아이콘 : {position:relative; right:40px;}

⊙ 맨 밑으로 내려버리기

{position:absolute; bottom:0px;}'

absolute를 쓸경우 backgroun color가 text에만 국한됨.

->width:100%;로 해결. 전체 배경색 하고 싶을 때도 활용하면 됨.

*relative는 있던 위치에서 이동, absolute는 절대값

*padding은 1개, 2개, 4개의 스타일을 넣을 수 있다.
1개 넣을 경우 : 사방으로 적용
2개 넣을 경우 : 차례대로 가로방향인 위 아래, 세로방향인 양 옆

오늘 배운 style 정리

display : 요소가 어떻게 보여질지를 결정
border: 1px solid red; - 테두리를 그려준다 (두께, 스타일, 색깔)
border-radius : 모서리를 둥게함
width: 넓이 지정
height: 높이 지정
position: html태그를 위치시키는 방식 지정
background-color: 배경색
font-family: 폰트 스타일
box-shadow: 박스뒤에 그림자
color: 글씨색 (16진수, rgb, 색깔이름 이렇게 세가지로 표현 가능)

profile
예비 개발자의 공부기록장

0개의 댓글