성장하기.27 HTML/CSS - 11. 이미지 1. 태그로 이미지 넣기 이미지를 웹 사이트에 추가하는 방법이 여러 가지 있는데, 가장 많이 쓰이는 방법은 img 태그를 사용하는 것이다. alt: 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제됐거나 잘못된 이미지 주소일 때..), 이미지 대신 보여줄 텍스트 src: 이미지 파일 경로 or 이미지 url 주소 img 태그의 속성(attrubute)에는 width, height가 있어서 html에서 이미지 크기를 조정할 수 있다. 하지만 유지보수나 좋은 코딩 습관을 위해 css는 항상 index.css에서 작성하는 것이 좋다. img { width: 150px; } 위 코드처럼 css에 가로만 지정해주어도, 가로의ㅏ 150px 비율에 맞춰 세로도 알맞게 바뀐다. 즉, 가로/세로 중에서 하나의 값만 입력해.. 2020. 6. 14. CSS - 8-1. box-sizing 1. box-sizing 눈으로 보이는 너비가, 개발자가 코딩하는 그 값이어야 코딩과 머릿속으로 생각하는 로직이 같아진다. 수많은 개발자가 이러한 특성이 불편하다는 것을 깨닫고 새로운 CSS 프로퍼티를 만들었다. .new { box-sizing: border-box; } 이와 같이 보이는 대로 width값을 주고, 그 후에 그 안 쪽으로 padding을 주는 것이 생각하기 쉽다. 그래서 거의 대부분 웹페이지에 box-sizing 프로퍼티를 기본적으로 적용한다. 또한, 모든 태그에 이 프로퍼티가 적용되어야 하는데 일일이 태그마다 적용하기에는 코드가 길어진다. * { box-sizing: border-box; } 위와 같이 "*" selector를 쓰면 모든 태그에 적용할 수 있다. ⚠️ 'box-sizin.. 2020. 6. 13. CSS - 10. CSS selector 1. CSS selector selector표현과 우선순위. [기본 표현방법] p { font-size: 20px; } .p-tag { color: gray; } #third-line { text-decoration: underline; } [class나 id가 selector일 때, 태그와 결합하는 방법] p.p-tag { color: gray; } p#third-line { text-decoration: underline; } 첫 번째는 p태그이면서 p-tag 클래스이고, 두 번째는 p태그이면서 third-line 아이디이다. 물론 p#third-line.p-tag 이런 조합도 가능하지만, third-line라는 아이디는 오직 한 개이므로 tag+id+class의 조합은 과한 표현이다. 또한 여러 s.. 2020. 6. 13. CSS - 9. 상속, 그룹 1. 상속(Inheritance) 상속은 css가 가진 특성이다. 말 그대로 스타일이 상속되어 자식에게도 같은 스타일이 적용된다는 의미이다. body { color: red; font-size: 14px; } body라는 태그에 color는 빨간색으로, 크기는 14px로 스타일했을 때, body 안에 있는 태그들은 부모인 body태그에 영향을 받아 빨간색과 14px로 변경된다. 만약 부모 요소가 빨간색이고 본인(자식) 요소가 파란색으로 속성을 지정해줬다면, 부모 요소의 속성보다 본인의 스타일이 우선 적용된다. 2. 그룹(Grouping) 여러 태그에 한 스타일을 적용하고 싶다면 각각 코드에 적어주는 것보다 가독성을 위해 한번에 그룹으로 묶어 적용하는 것이 좋다. p, span, div, my-class .. 2020. 6. 13. 이전 1 2 3 4 5 6 7 다음
