ʕ ˙ɷ˙ ʔค

HTML,CSS 4

css 꿀팁

background 개별속성은 단축속성 아래에 적어야 한다. (후자 우선의 원칙) background:red; background-clip:padding-box; // 뒤에 적어야함 background-clip:padding-box; // 앞에 적으면 속성 적용 x background:red; div만 3개 적었을 때 last-child 속성 적용이 안 된다. first-child는 인식하지만 마지막 자식이라는 것을 인식하지 못함 section태그로 감싸주면 div:last-child 가 적용이 된다. !! 다만 div:nth-child(3) 은 명확하기 때문에 적용이 된다. Hello Hello Hello

HTML,CSS 2023.09.18

CSS 빔캠프

https://camp.veamcamp.com/csscook/page/list.php 빔캠프님 홈페이지 주소 veamcamp CSS 요리사가 되자 재료에 대한 완벽한 이해 CSS 요리하기 CSS 초기값 initial value 이해하기 CSS 상속 inheritance 이해하기 User-agent stylesheet 이해하기 캐스케이드 이해하기, CSS Specificity CSS 박스모델 5가 camp.veamcamp.com .header h1 // h1 중에 조상이 header인 것만 남아 desendant combinator (띄어쓰기 용어) - 헤더와 h1 사이의 띄어쓰기가 있으면 의미 부여가 된 것 h1 / 만 하면 원치않은 것들도 선택된다. .header h1 으로 하면 조금 더 안정적인 선택..

HTML,CSS 2023.03.10

텍스트 꾸미기 CSS

- 멋쟁이사자처럼 프론트엔드 수업 내용 참조- [ color 색상 ] - 폰트 색상 나타냄 - font- 가 붙지 않으니 유의하자 - 키워드(red, blue) HEX(#+16진수 표기법), rgb(), rgba(), hsl(), hsla()등 다양한 방법으로 표기할 수 있습니다. - 보통 HEX을 많이 사용하며, 투명 값을 위해 rgba도 많이 사용합니다. - transparent 는 투명한 색을 의미합니다. !! 저시력 시각 장애(시력 저하, 색약, 색맹)를 위해 폰트의 색상과 배경의 명도 대비도 중요하다!! 최소한 4:5:1 - 개발자도구에서 명도대비 확인 가능 [폰트적용 방법] - link 를 더 권장함 - 한 페이지에서 폰트 3개 이상 쓰지 않도록 하자 (폰트가 많아지면 복잡한 페이지가 되고 무..

HTML,CSS 2023.03.02

HTML/CSS 텍스트와 관련된 태그들

여백 같은 줄 바꿈은 CSS 스타일로 적용하기 (스타일 적인 요소들은 무조건 CSS 사용하기) [br] 태그 사용 권장하지 않음 [화면에 따른 줄 바꿈 처리] 1. span 태그와 CSS display 속성을 사용 2. wbr 태그 사용하기 [wbr] - 실무에서 많이 사용되지는 않음 - 영어일 때는 속성이 필요없음 - 한글일 때는 word-break: keep-all; 을 써줘야함 wbr이 먹는다. - 한국과 영어가 다름 - pc는 한줄로 나오고 모바일에서는 줄바꿈이 되어야한다. [code] 노션이나 블로그에서 'push()' 이렇게 하면 코드로 뜬다. - 짧은 코드 조각(한 줄)을 나타낼 때 사용 - 웹 접근성을 위해서 사용 push()로 적으면 텍스트로 알고 그냥 읽어버릴 수도 있음 code로 처리..

HTML,CSS 2023.03.02