본문 바로가기

Mark Up26

[CSS] Chapter 09. 레이아웃 만들기 - display_inline 2번째 파랑색 div 블럭과 3번째 초록색 div 블럭을 어떻게 한 라인에 배치를 할 수 있을까? 크게 4가지 방법을 통해 알아보겠다. 1. 많이 사용하지 않은 귀찮은 방법 .container { width: 400px; height: 600px; border: 1px solid black; } .top { background: red; width: 400px; height: 200px; } .left { background: blue; width: 200px; height: 200px; } .right { background: green; width: 200px; height: 200px; } .bottom { background: purple; width: 400px; height: 200px; } .. 2022. 12. 29.
[CSS] Chapter 08. CSS 레이아웃 부모태그의 css는 자식도 영향을 받는다 - inherit Loerm // 빨간색 글씨로 나온다. 버튼 // 태그마다 상속이 안되는 경우도 있어서, 버튼 태그는 직접 설정해야한다. .parent { width: 200px; height: 200px; border: 1px solid red; } .child { width: 70%; height: 70%; background-color: blue; } // 두 class가 div 태그라고 가정했을 때, child 태그는 parent 태그의 크기 70%에 해당하는 크기를 가진다. px, em, rem 일반적으로 16px = 1em = 1rem이다 .px { font-size: 16px; } .em { font-size: 1em; } .rem { font-si.. 2022. 12. 26.
[HTML] Chapter 07. 레이아웃 나누기 웹 페이지를 만들 때, 중요한 사실은 일단 div 태그로 공간 나누기를 해야한다. 하나의 웹 페이지에서는 다양한 구역이 있고, 기능이 있다. 그것이 디자인의 경계가 되었건 혹은 기능적인 경계가 되었건 html 상에서 구역이 나눠질 필요가 있다면 일단 div 태그로 나누고 봐야한다. 물론 무의미한 div 태그 사용은 권장되는 코딩의 방식은 아니지만, 그럼에도 불구하고 이유가 있다. 유지보수가 편해진다. 고쳐야하는 컨텐츠가 어떤 div 태그에 있는지 파악을 할 수 있다면 나중에 수정이 필요할 때, 금방 찾을 수 있다. 협업이 쉬워진다. 단순 태그보다도 태그로 감싼 태그가 직관성이나 의도를 알기가 쉬울 것이다. 단 div 태그에 class, id를 부여하게 될텐데, 이 네이밍들은 누가보더라도 이해할 수 있게끔.. 2022. 12. 26.
[HTML] Chapter 06. 논 시멘틱 - 공간을 나누는 div, span 태그 시멘틱 마크업을 할 때든, 우리가 주로 많이 쓰는 태그는 와 태그일 것이다. 1. Div : Division / 가상의 경계, 가상의 레이아웃 2. Span 태그는 공통적인 영역에 대해 레이아웃을 나누는 데 있어 css에 중요한 태그이다. 특징은 태그처럼 display: block 이라는 속성을 가지고 있으며 자동으로 줄바꿈이 된다. 줄바꿈, display 영역이 설정되지 않고, 단순히 영역을 감싸주기만 하는 태그가 태그이다. 다시 한 번 복기하지만, non-semantic 태그를 사용하기 전에, "과연 이게 non-semantic 태그 밖에 사용할 수 없는 것일까?" 라고 고민해봐야 한다 2022. 12. 26.
[HTML] Chapter 05. 시멘틱 마크업 HTML5가 등장한지 몇년이 흘렀음에도 불구하고, 아직까지도 태그로만 마크업된 웹사이트를 많이 접하곤 한다. 하지만 이렇게 오로지 태그로만 마크업된 웹페이지는 시각적으로는 아름다울지 몰라도 여러가지 측면에서 문제가 있을 수 있다. 시멘틱 마크업이란? 태그는 보통 웹페이지에서 화면의 특정 영역에 스타일을 적용하거나, 전체 화면 레이아웃을 잡는데 자주 사용이 된다. 그래서 웹사이트에서 다음과 같은 태그가 사용되는 것을 어렵지 않게 접할 수 있다. ... ... ... 사실 HTML5에서 이러한 화면 레이아웃을 위해서 헤더 영역 태그로 마크업된 헤더 영역은 일반적으로 웹사이트의 로고와 소개글 그리고 메인 메뉴가 위치하게 된다. 태그는 최상위 제목을 마크업하기 위해서 쓰이는데, 일반적인 웹페이지에서는 대부분 하.. 2022. 12. 26.
[CSS] Chapter 07. 시멘틱 태그와 스타일링 시멘틱에 관한 설명글 : https://song-ift.tistory.com/8 https://song-ift.tistory.com/50 하나를 에로 들면 : 단순히 글자만 굵게 : 문서에서 중요한 단어 두 태그는 보이기에 렌더링상으로 똑같이 보인다. 시멘틱 태그는 적절한 상황에 의미를 부여해서 쓰는것이지, 단순 웹의 스타일링을 위해 사용하면 안된다. 검색포털에서 html을 읽는데 도움이 될 수 있고, 스크린리더에 탐색할 때 용이하다. 시멘틱 태그는 종류도 많거니와 외울 수 없다 자주 사용하는 시멘틱 태그 : 위 첨자 : 아래 첨자 : 약자 2022. 12. 26.
[CSS] Chapter 06. class와 id 속성 ID 값은 단 하나 1 2 id의 값 같은 경우는 문서에 고유, 유니크하게 단 하나만 존재하는 것이 개발자들끼리의 약속이다. 설령 적용된 id값의 요소가 중복으로 존재하더라도 브라우저상에서는 아무런 에러없이 렌더링 될 것이다. 하지만 개발자들끼리 id값은 고유한 값으로 사용하자는 약속이고, 관습이다. var x = document.getElementById("heading"); // 어짜피 id를 선택하는 것이기 때문에, 단 하나만 선택된다. var xx = document.getElementsByClassName("title"); // class는 여러번 중복되도 되기 때문에, 여러개의 태그가 할당된다. 웹 프로그래밍에서 html, css, javascript까지 세 개는 떼놓지 못할정도로 많은 연관을.. 2022. 12. 23.
[CSS] Chapter 05. 선택자(Selector)_3 1. 주요 선택자 - Type, Class, ID 2. 속성 선택자 - [attr], [attr=value] 3. 속성 선택자 -[attr^], [attr$], [attr_] 4. 가상클래스 선택자 - first-child, last-child, nth-child 5. 가상클래스 선택자 - first-of-type, last-of-type, nth-of-type 6. 가상클래스 선택자 - not 7. 가상클래스 선택자 - link, visited 8. 가상클래스 선택자 - hover, active, focus 9. 가상클래스 선택자 - enabled, disabled, checked 10. 가상요소 선택자 - before, after 11. 가상요소 선택자 - first-letter, first-line.. 2022. 11. 26.
[CSS] Chapter 04. 선택자(Selector)_2 1. 주요 선택자 - Type, Class, ID 2. 속성 선택자 - [attr], [attr=value] 3. 속성 선택자 -[attr^], [attr$], [attr_] 4. 가상클래스 선택자 - first-child, last-child, nth-child 5. 가상클래스 선택자 - first-of-type, last-of-type, nth-of-type 6. 가상클래스 선택자 - not 7. 가상클래스 선택자 - link, visited 8. 가상클래스 선택자 - hover, active, focus 9. 가상클래스 선택자 - enabled, disabled, checked 10. 가상요소 선택자 - before, after 11. 가상요소 선택자 - first-letter, first-line.. 2022. 11. 25.
[CSS] Chapter 03. 선택자(Selector)_1 1. 주요 선택자 - Type, Class, ID 2. 속성 선택자 - [attr], [attr=value] 3. 속성 선택자 -[attr^], [attr$], [attr_] 4. 가상클래스 선택자 - first-child, last-child, nth-child 5. 가상클래스 선택자 - first-of-type, last-of-type, nth-of-type 6. 가상클래스 선택자 - not 7. 가상클래스 선택자 - link, visited 8. 가상클래스 선택자 - hover, active, focus 9. 가상클래스 선택자 - enabled, disabled, checked 10. 가상요소 선택자 - before, after 11. 가상요소 선택자 - first-letter, first-line.. 2022. 11. 24.

티스토리툴바