본문 바로가기

Front-end/HTML, CSS

 (10)
CSS 적용 우선순위 CSS의 특성상 어떤 태그에 속성이 중복되어 설정될 수 있는데요, CSS는 어떤 속성이 우선되어 적용되는지 미리 명시하고 있습니다. 우선순위는 아래와 같습니다. 속성 값 뒤에 !important 를 붙인 속성 HTML에서 style을 직접 지정한 속성 #id 로 지정한 속성 .클래스, :추상클래스 로 지정한 속성 태그이름 으로 지정한 속성 상위 객체에 의해 상속된 속성 같은 우선 순위에 있는 경우, 부모-자식 관계가 많은 경우가 우선되며, 모든 설정이 같은 경우 나중에 선언한 것이 우선되어 적용됩니다. !important 우선순위를 무시하고, 꼭 적용 시키고 싶은 속성이 있다면, 속성 값 뒤에 !important 를 붙여서 적용시켜주면 됩니다. .normal { color: blue } .compulsi..
codecademy - HTML, CSS, JavaScript 코스 HTML, CSS ,JavaScript 이해도를 높이기위해 Codecademy코스를 시작했다 학원, 유튜브로 공부를 했지만 다시한번 반복하고 확실히 이해하기위해 수업을 듣기시작했다 가장 기본적인 HTML, CSS, JavaScript를 잘 다룰수 있어야 진정한 프론트엔드 개발자라는 많은 사람들의 조언이 있었다 아직은 클론코딩으로 웹사이트를 만드는 수준이지만 계속 실력을 쌓아서 스스로 모든 사이트를 만들 수 있도록 노력해야겠다.
flexbox 연습 사이트 https://flexboxfroggy.com/
CSS selector 연습 사이트 https://flukeout.github.io/
em rem 정리 부모요소에 사이즈에 따라야한다면 % em 브라우저에 상이즈에 따라야 한다면 v* rem 요소의 너비와 높에 따라 사이즈가 변경되야 한다면 % v* 폰트 사이즈에 따라 변경되야 한다면 em rem rem을 쓸땐 부모컨테이너와 상관없이 페이지에 어떤박스안에서 사용해도 크기가 일정하게 고정 (font는 rem을 선호) em은 브라우저 위에서 쓸때랑 부모컨테이너 안에 쓸때라 크기가 달라진다 (부모요소에 따라 크기 변환) Em 변화값 사이트 http://pxtoem.com/ 폰트는 브라우저 안에 모두 같은 크기 유지 하기위해 rem Padding은 박스별로 크기가 달라지기위해 em Media에서도 max-width를 rem으로 바꿔주면 더 가독성좋은 반응형이 된다
Responsive CSS Units (%, EM, REM) Units 대부분 px를 이용한다 (모니터에 나타낼 수 있는 가장 작은 단위) Px로 하면 글씨크기 조절이 안되지만 %로 하면 가능 Em 부모의 font사이즈에서 곱한값으로 계산된다 Rem (r = root) Root에 지정된 font사이즈에 따라서 크기가 결정 Vw (view Width ) Vh (view height ) % vw부모요소와 상관없이 크기조절
DreamCoding 엘리 - 프론트엔드 개발자 되기 입문편 (4) Vscode Plugin : HTML to css auto 정말 유용한것, html에 class를 css파일에서 알파벳하나만 쳐도 자동 완성 Emmet: https://emmet.io/ 반응형 웹디자인 (중요) @media를 이용해서 반응형웹을 만든다 보통 min-width로 만들 수 있다. Mozilla 반응형웹 예제 https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design Header만들기 Flex박스를 사용하여 만든다는걸 바로 알아차려야 한다. 아이콘 https://fontawesome.com/ VScode 한 줄(Line) 주석 토글하기 Ctrl+ /
DreamCoding 엘리 - 프론트엔드 개발자 되기 입문편 (3) Material Design Color Tool 컬러 지정해줄 주는 사이트 https://material.io/resources/color/#!/?view.left=0&view.right=0 Flexbox (css의 꽃) 박스안에서 자유롭게 배치할 수 있는것 Container에 지정되는 속성값 Item에 지정되는 속성값 Flex-grow : 윈도우 창에 맞춰서 커지고 줄어든다 Flex-shrink : 창에 따라 줄어들지 Align-self : 원하는 박스만 따로 배치하고싶을떄 Float CSS Tricks for Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Flexboxfroggy // flexbox연습사이트 https://flexb..

티스토리툴바