CSS (11) 썸네일형 리스트형 [CSS] CSS border, padding 사용할 때 요소 크기 유지 크기 계산 (box-sizing) box의 사이즈를 150px로 지정하였는데 border과 padding을 적용하고 나니 개발자 도구에서 Box1은 270px로 출력된다. i.e. Box1 가로 : 150px(기본가로값) + 10px(border좌) + 10px(border우) + 50px(padding좌) + 50px(padding우) = 270px Box2 세로 : 150px(기본가로값) + 10px(border좌) + 10px(border우) + 50px(padding좌) + 50px(padding우) = 270px 아래 이미지 처럼 box1과 box2의 크기를 맞추려 수동으로 셋팅하는 것에는 한계가 보인다. 여기서 box1에 box-sizing : border-box;를 추가하면 자동으로 box2.. [CSS] Margin 외부 여백 외부 여백(margin) margin : 30px(상하) 80px(좌우); .box{ width: 300px; height: 300px; margin: 30px 80px; background-color: brown; } .box2{ width: 300px; height: 300px; background-color: brown; } margin : 10px(상) 30px(좌우) 80px(하); .box{ width: 300px; height: 300px; margin: 10px 30px 80px; background-color: brown; } .box2{ width: 300px; height: 300px; background-color: brown; } margin 음수값 적용 (자주 쓰지 않지만 유용할.. [CSS] CSS 속성 단위(Units) font-size px vs. em 그리고 rem .parent { width: 300px; height: 200px; background-color:lightcoral; } .child{ width: 50%; height: 50%; background-color:royalblue; } 기본적으로 font-size는 16px 만큼의 크기가 들어가 있다. (위 사진 참조) 단위 em 폰트 사이즈(16px) 만큼의 1em으로 사용으로 한다. 주변 상황에 따라 상대적으로 폰트 크리가 달라벼 관리가 필요한 단점이 있다. 여기서 Css child width값을 10em으로 바꾸면 16px 곱하기 10으로 160px i.e.160em으로 환산된다. 동일하게 20em으로 값을 바꾸면 아래와 같이 3.. [CSS] CSS 선택자 우선순위 (중요!) 선택자 우선순위 란? 하나의 요소가 여러 선언 대상이 된 경우 어떤 선언을 우선적으로 적용할지 결정하는 방법. 조건1 Css 내용을 Html에 적용할 때 붙는 점수가 높은 선언이 화면에 출력된다. 조건2 점수가 같을 경우, 맨 마지막으로 작성한 코드 내용이 우선 적용된다. Hello World!! div {color:red !important;}/* 1순위 (!important - 9999999점) */ #color_orange {color:orange;}/* 3순위 (ID 선택자 - 100점) */ .color_yellow {color:yellow;}/* 4순위 (Class 선택자 - 10점) */ div {color:blue;}/* 5순위 (태그 - 1점)*/ * {color:darkblue;}/* .. [CSS] CSS 상속, 상속되는 CSS속성 1. 스타일 상속 Css 내용을 적용했을 때, 적용된 내용이 기타 하위 요소까지 영향을 주는 것을 말한다. body { margin:50px; } .people {/* people에 Css를 적용하였는데 */ color:lightpink; font-weight:bold; } 직원 사람 Jim Tommy Eve 로봇 이렇게 부모 요소를 통해 상속되는 Css 속성은 모두 글자/문자와 관련된 속성 이라는 것! ** 주의 : 그렇다고 모든 글자/문자 속성이 상속되는 것은 아니다. e.g. font-size | 글자 크기 font-family | 폰트(서체) font-weight | 글자 두께 font-style | 글자 기울기 Inline-height | 글자 높이 color | 글자 색상 text-align .. [CSS] CSS 선택자 1. 기본 전체 선택자 (Universal Selector) 범위 안에 있는 모든 요소 선택 * { background-color:gold; } 태그 선택자 (Type Selector) 태그 이름으로 요소 선택 단, 태그의 종류가 모든 요소를 구분할 만큼 고유한 것이 아니기에 원하는 요소를 조금 더 정확하게 집어낼 수 있는 class 선택자를 사용할 수 있다. div { background-color:gold; } 클래스 선택자 (Class Selector) class로 지정한 요소 선택 (중복 선택 가능) .name { background-color:gold; } 아이디 선택자 (ID Selector) 전역 속성 id 값을 통해 요소를 찾는 개념 #name { background-color:gold;.. [CSS] CSS 선언 방식, Types of CSS 내장방식 (Internal CSS) Html 안에서 Css를 작성하는 방식. 장점 : 별도의 Css파일을 만들지 않아도 된다. 단점 : Css양이 많이질 경우, Html 안에서 한번에 다 처리하기 어렵고 유지 보수가 비효율적이다. ** 단, 프론트엔드 개발 방식으로 Html, Css, Javascript 파일을 구별해서 관리하면 장점이 많다는 점을 기억해두자. ** 번들 : Html, Css, Javascript를 한번에 묶어서 서버에 올리는 방식이다. 번들하는 과정에서 개발하는 내용을 제품화시킬 때 파일로 분류한 내용들을 컴퓨터가 자동으로 합쳐서 내장방식으로 심는 경우가 있다. 이럴 경우, '내장방식'으로 Css를 작성하는 방법은 직접적으로 관리할 필요가 없어서 문제가 되지 않는다. 인라인 방식 (In.. [CSS] 브라우저 스타일 리셋,초기화_CSS reset 크로스 브라우징 (Cross Browsing) : 모든 브라우저에서 화면이 동일하게 보이는 것이 아니라, 동등한 수준의 정보 및 기능 제공이 우선이라는 개념이다. 우리가 사용하는 웹브라우저들은 각기 다른 속성과 기술요소(렌더링엔진)가 존재하며, 이로 인해 웹브라우저 별로 표현하는 것에는 차이가 있을 수밖에 없습니다. 동일한 웹사이트라 하더라도 어떤 웹브라우저로 보느냐에 따라 다르게 보일 수 있는 것이죠. '모든 브라우저에서 동일하게 보여준다'는 현실적으로 불가능한 얘기입니다. 다만, '크로스 브라우징'은 최대한 다양한 브라우저에서 제작자가 의도한 내용을 이상 없이 동작하게 해줍니다. [출처] 크로스브라우징 (Cross Browsing) 이란|작성자 패치워크 홈피온의 웹과 온라인마케팅 이야기 : 네이버.. [CSS] To change text color in list To change the color of the inline text, targets the CSS selector “a” To remove underline from a link with CSS, ADD text-decoration: none to your code. For example, to remove underline for all links on all pages, use this CSS code: a { text-decoration: none; color: black; } This code targets the CSS selector “a”, which selects all HTML tags - the ones used for links, and adds the CSS text-decorat.. [CSS] To remove underline / dots from a link To remove underline from a link with CSS, ADD text-decoration: none to your code. For example, to remove underline for all links on all pages, use this CSS code: a { text-decoration: none; color: black; } This code targets the CSS selector “a”, which selects all HTML tags - the ones used for links, and adds the CSS text-decoration: none and color: black to remove the underline and set a fixed co.. 이전 1 2 다음
