HTML-CSS (12) 썸네일형 리스트형 Blocks and Inlines html의 다양한 태그들은 block이거나 inline 이다. 1. Block 대표적을 div태그가 있다. 이는 옆에 아무것도 올 수 없다. 예를들어 div태그 세개를 나란히 작성하여도 각각이 block이므로 세개가 세로로 배치된다. block은 높이와 너비를 가질 수 있다. css코드 내에서 width 와 height값을 부여할 수 있다. 거의 대부분의것들이 block이므로 block이 아닌것을 몇개 외우는게 좋다. ex) div, address, blockquote, 등등... 2. Inline block의 반대 개념이다. 옆에 무언가가 올 수 있는 태그로, 짧은 글이나 사진등이 포함된다. 짧은 글인 span태그를 여러개 나란히 작성하면 span 옆에 span 이런식으로 배치가 된다. 주로 사용하게 .. css 내용정리 기본 구조는 가리키고 싶은(꾸미고 싶은) 내용을 selector를 적고 중괄호로 감싼다음 내용을 적는다. h1 { property-name : property-value; color: blue; font-size: 20px; 등등.. } 안에 들어가는 속성들은 외우는게아니고 찾아서 원하는대로 찾아쓰면 된다. 여러개의 div중에서 원하는 한개의 태그만 골라서 css를 적용하고 싶을땐 id를 사용하면 된다. 위와 같은 코드가 있다고 할때, 두번째 div에만 색깔을 부여하고 싶다면 다음과 같이 css코드를 작성하면 된다. #sec { background-color: tomato; width: 100px; height: 100px; } CSS를 페이지에 추가하는 방법! CSS를 html에 적용시키는 방법은 크게 두가지가 있다. 1. html파일에 css코드와 html코드를 같이 놓는다. (비추) 걍 더러워 보임 코드가 복잡해보임. contents 위와같은 방식이다. head태그 안에 style태그를 열고 그 안에 코드를 작성하면 된다. 이 부분은 항상 head태그 안에 있어야 한다. 2. css파일을 만들어서 적용한다. (개추ㅋㅋ) 먼저 style.css라는 파일을 만들었다고 가정한다. 이후 다음과 같이 작성하면 적용이 된다. contents 이렇게 해야 html코드와 css코드가 분리되어 깔끔하게 저장이 가능하므로 대부분 이렇게 한다고 한다. (본인이 웹 잘 모르는 컴붕이면 개추 ㅋㅋ) HTML HTML의 기본구조는 다음과 같다. something 1. html 은 여러가지 tag를 사용한다. 기본구조는 다음과 같다. CONTENT 추가로 태그안에 다른태그를 겹쳐서 사용 할 수 있다. 하지만 태그를 닫는 순서는 잘 지켜주어야 브라우저가 코드를 이해하고 실행할 수 있다. 2. tag안에 많은 attribute들을 사용할 수 있다. 기본구조는 다음과 같다. CONTENT 값을 담는 부분에는 항상 큰따옴표를 사용하는 습관을 들여야 편하다. (모든 태그에는 id라는 attribute를 가질 수 있다.) 3. 코드작성시 의미 부여를 위해 semantic 태그를 사용하자. 대부분의 태그들은 가장 널리쓰이는 div태그로 사용할 수 있지만, 의미를 알아챌 수 있는 semantic 태그들을 사용한다. 예를들어,.. 이전 1 2 다음