아주 조금 많이 부족한 첫 포토폴리오 google 홈페이지
아이콘 이미지 링크 : 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;}를 적용하면 된다!
오른쪽 마우스 -> 검사 -> 왼쪽위버튼(selector)로 선택 -> 원하는 곳 클릭 -> style 클릭
해당되는 HTML 부분 오른쪽 마우스 -> 강제상태(focus state) -> hover 선택
모서리 둥글게 만들기
{border-radius:~px;}
선두께, 스타일 그리고 색
ex) {border: 1px solid #dfe1e5;}
왼쪽에 있는 아이콘 : {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개 넣을 경우 : 차례대로 가로방향인 위 아래, 세로방향인 양 옆
display : 요소가 어떻게 보여질지를 결정
border: 1px solid red; - 테두리를 그려준다 (두께, 스타일, 색깔)
border-radius : 모서리를 둥게함
width: 넓이 지정
height: 높이 지정
position: html태그를 위치시키는 방식 지정
background-color: 배경색
font-family: 폰트 스타일
box-shadow: 박스뒤에 그림자
color: 글씨색 (16진수, rgb, 색깔이름 이렇게 세가지로 표현 가능)