전체 글 (67) 썸네일형 리스트형 [CSS] img와 background image 태그 중에 뭘 쓰는게 좋을까? image와 background image의 차이점? 나 혼자 실습을 진행했을 때 image 파일로 사진을 넣었었는데 강사님은 background image 사용을 권장했다. 실습 내용은 숙박 시설 이용 고객이 리뷰를 남길 수 있는 페이지를 만드는 것이었는 데 문제는 고객이 올리는 이미지의 사이즈가 어떨지 모른다는 것 그래서 img 태그 사용했을 때 CSS로 세로가 긴 이미지일 경우, 가로가 긴 이미지일 경우를 나눠서 설정해줬는 데 이미지의 비율에 따라 제각기 다른 클래스가 자동으로 들어가야 하는 문제 발생해서 매우 비효율적 이때 CSS로 background-image를 사용하면 한 방에 해결된다고 한다!! + 추가로 img와 background-image의 차이점을 검색해보았는 데 대.. [HTML] ol과 ul의 차이 알아보기 목록 ol(ordered list): 순서가 중요한 목록 ul(unordered list): 순서가 중요하지 않은 목록 ★ul과 ol의 자식요소는 무조건 li만 가능!!!★ 항목1 항목2 정의 리스트 Description list 1. 용어를 정의할 때 2. key-value로 정보를 제공할 때 【key-value】: 무언가를 정의 내릴 때 사용 태그 dl: descrtiption list, 선언하는 기능 dt : description term, 용어(key값)를 마크업하는 기능 dd: description data, 용어를 설명하는 기능 안좋은 예시 [CSS] Webfont 사용법 알아보기 webfont 사용하는 두 가지 방법 1. 갖다 쓴다 ex) google fonts 여기서 시키는 대로 하면 됨 꿀팁! body에다가 font-family 주면 전체 적용됨 2. 직접 제공한다 (1) asstes에 font 붙여넣기 (2) fonts.css파일 만들기 @font-face{ font-family: "Nanum"; font-style: normal; font-weight: 400; src: url } src의 경우 fontface css trick 검색해서 복붙하기! (가지고 있지 않은 font file 만 지워주고 사용하기) (3) 경로 상황에 맞게 바꿔주기 (4)임포트 하기 HTML에 하는 법: CSS에 하는 법: @import url("./fonts.css".. [CSS] Typography 알아보기 (1)font-size px em: 실제로 적용된 폰트 사이즈가 1em rem: html에 적용된 폰트 사이즈가 1rem (2)line-height: 줄높이 (line height 사용하면 글자는 줄높이의 가운데에 배치해줌) px em (em 사용할 때는 em 생략하고 표시) rem (3)letter-spacing: 글자의 간격 조정 px em(em 생략X) (4)font-weight 100/200/300/400/500/600/700/800/900 400: regular 사이즈 굵기 700: bold체 굵기 (5)color hex: #0066ff rgb: rgb(0,125,255) rgba: (o,102,255,1) 마지막 숫자가 투명도 나타냄 (1)text-align l.. [CSS] Flex 간단한 실습하기 잘한점: .profile-detail{ width: 100%; display: flex; justify-content: space-around; } justify-content가 안먹어서 개발자도구를 유심히 들여다보니 width 크기가 너무 작아서 인 것 같았다. 그래서 width:100%;를 주니 문제 해결! 간단한거지만 처음으로 나혼자 문제해결을 해서 너무 뿌듯하다 :) 다른 건 다 했는데 밑에 숫자 배치를 어떻게 해야될지 모르겠당,, -->강사님이 하시는 것을 보니 justify-content: space-between을 주셨다 ※ width:100%로 주지만 height:100vh로 주어야 함 [CSS] media query 알아보기 medis query는 반응형 웹사이트를 만들기 위해서 반드시 알아야 합니다!! 사용법 HTML: viewport meta CSS: media query @media screen and (min-width: 768px){ .box{ background-color: } .box::after{ content: "Tablet" } } //768px 이상에서는 이런 스타일을 주라는 선언 가상요소 ::before, after{ content: " " // 꼭 넣어줘야 함!! } [CSS] Flexbox 알아보기 float 사이즈 줄여서 라도 한 줄로 정렬 -flex-wrap:wrap;--> 공간이 넉넉치 않으면 여러 줄 만듦 (4)플렉스 박스 정렬 타임 ※ align-items와 align-content 꿀팁! 일단 align-items 사용해보고 안되면 align-content 사용해보기! (align-content 'flex-wrap:wrap'인 상태에서 사용 가능) [CSS] position 실습하면 배운 것 (1) 사진이랑 글을 가로 배치할 때 position 쓸지 float 쓸지에 대한 궁금증 해결 뭔가 특정 장소에 고정시켜 놓아야 한다 = position 두 요소를 옆으로 배치시켜야 한다 = float (2) 우리 눈에 보이지 않더라도 브라우저에게는 전달이 되면 좋은 정보, 혹은 스크린 리더를 통해 웹을 사용하는 사용자들에게 전달해야 하는 정보를 제공하고 싶을 때 사용하는 게 aria-label!! (3) 이미지의 width랑 height 바꿔줄 때 display=block; 설정 (4) width, height 적용 안될 경우 display 먼저 확인 (5) transform -자기 자신을 기준으로 움직임 -transform: translateY(-50%); (6) margin: 0 .. 이전 1 ··· 3 4 5 6 7 8 9 다음
