프론트엔드/css (11) 썸네일형 리스트형 css 우선 순위 완전 똑같은 선택자가 나중에 또 나오면, 이전에 나온 스타일을 덮어쓰게 됩니다. 명시도 (Specificity) 같은 요소를 가리키지만 선택자가 다르다면, '명시도(specificity)'에 따라 우선 순위가 결정됩니다. 명시도 계산기 명시도 계산 방법을 알려드리겠습니다. 인라인 스타일이 가장 우선 순위가 높습니다. 선택자에 id가 많을 수록 우선 순위가 높습니다. 선택자에 class, attribute, pseudo-class가 많을 수록 우선 순위가 높습니다. 그 다음은 그냥 요소(또는 가상 요소)가 많은 순서입니다. 예시) html Link 1 Link 1 Link 1 Link 1 css ul li:first-child #link { color: green; } ul li:first-child a .. css 다양한 단위들 CSS에는 px, rem, em, % 등 여러 단위가 있습니다. 폰트 크기 뿐만 아니라 padding, margin, width 등 다양한 속성들에 이 단위들을 사용할 수 있습니다. 이 단위들의 차이에 대해 알아봅시다. px px는 절대적인 값입니다. 다른 요소의 값에 영향을 받지 않는다는 거죠. rem rem 은 상대적인 값입니다. 하지만 오직 태그의 font-size에만 영향을 받습니다. 2rem은 태그의 font-size의 2배 크기입니다. em em도 rem과 마찬가지로 상대적인 값입니다. em은 자기 자신의 font-size를 기준으로 합니다. 2em은 자기 자신의 font-size의 2배 크기입니다. 자기 자신의 font-size를 따로 정해주지 않을 경우, 상위 요소에서 상속받은 값을 기준으.. OverFlow : 내용물이 서로 겹칠 때 style 태그 안에서 만약 내용물이 겹칠 때가 있으실텐데, 그때는 overflow : hidden // visible // scroll // auto를 활용해서 핸들링할 수 있습니다. 폰트 파일 사용하기! 배달의 민족 주아체를 한 번 파일로 사용해보겠습니다 먼저 다운로드 합니다. 이후에 프로젝트 폴더안에 저장을 해봅니다. css 파일에 다음과 같은 코드를 활용할 준비를 해줍니다. 사용하고 웹에서 바뀌는 것 확인 구글 폰트 사용법 https://fonts.google.com Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 만약 한글 폰트를 바꾸고 싶으시다면 아래에서 korean이라고 검색하셔서 나오는 것을 활용하시면 됩니다!! https://fonts.google.com/earlyaccess Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 접속 후 마음에 드는 폰트를 클릭하여 상세 스타일을 고르고 링크 태그를 복사합니다. 헤드 태그안에 잘 넣어줍니다. 이후 css에다가 .. text-align : center가 적용이 되지않을 때 분명 다른 부분은 잘 적용이 되는데, 태그로 감싼 부분은 되지않는다던가 하는 문제가 생길 때 div 태그로 감싸주면 됩니다! 실제로 text-align은 어떤 한 구역에서 텍스트의 위치를 조정해주는 것인데, 만약 구역 자체가 없다면 아무리 center를 적용해도 해결되지 않습니다. 폰트 굵기 설정 //로 구분한 것들은 각기 다른 종류인 것들입니다. font-size : 숫자 px font-weight : 숫자 (단, 100~900까지 100의 단위로만 사용가능, 130 250 이렇게 x) // normal (400과 동일)// bold (700과 동일) text-align : center//right//left text-decoration : underline // overline / linethorugh 색을 설정하는 여러가지 방법 색 이름으로 바꾸기 : RGB로 색깔을 바꾸고 싶을 때 : https://htmlcolorcodes.com HTML Color Codes Easily find HTML color codes for your website using our color picker, color chart and HTML color names with Hex color codes, RGB and HSL values. htmlcolorcodes.com 이전 1 2 다음
