Display Display 속성은 각 요소들이 렌더링 되어지는 화면 표기 방법을 결정할 수 있다. 속성들 중 none, inline, inline-block, block 4가지가 주로 쓰인다. HTML에서 기본 표시 값은 HTML 사양이나 브라우저나 유저의 기본 스타일 시트에서 가져오는데, XML의 기본값은 SVG 요소를 포함한 inline이다. 💡 XML ? : eXtensible Markup Language로 W3C에서 개발된 다목적 마크업 언어이다. 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 HTML의 한계를 극복할 목적으로 만들어 졌다. 💡 SVG ? : Scalable Vector Graphics. XML에 기반하여 벡터 그래픽을 표현하기 위해 개발된 그래픽 파일 형식이다. ..

Position Position 속성은 요소의 위치 지정 방법(static, relative, fixed, absolute, sticky)을 지정한다. 지정 후에는 top, bottom, left, right 속성을 통해 배치할 수 있으며, 지정 된 속성에 따라 해당 값들은 다르게 작동한다. (1) static HTML의 요소들은 static이 기본으로 배치되어 있다. position: static; 으로 지정 된 값들은 딱히 특별한 기능을 하지 않으며, 페이지에 의한 기본적인 흐름에 따라 배치된다. div.static { position: static; border: 3px solid #73AD21; } (2) relative position: relative;로 지정 된 요소는 기존의 위치를 기준으로..

Semantic Semantic 자체의 영어 뜻은 다음과 같다. 프로그래밍에서는 코드 조각의 의미를 나타낸다고 한다. "이게 어떻게 시각적으로 보여질까?" 가 아닌 "이 JS 코드 라인을 실행하는 것은 어떤 효과가 있는가?" 혹은 "이 HTML 요소가 가진 목적/역할은 무엇인가?" 에 대한 것이다. Semantic Web ? 그럼 Semantic Web이 뜻하는 바는 무엇일까? 해당 사이트에 따르면 현재 인터넷 사용자 수는 52억이고, 웹사이트는 19억개가 넘는다. www.internetlivestats.com 에 들어가면 실시간으로 움직이는 숫자들을 볼 수 있다. 그럼 이 수많은 사용자와 사이트들 사이에서 살아남기 위해선 어떻게 해야할까? 바로 검색이다. SEO Search Engine Optimiza..

Book List 개발자의 글쓰기 김철수 모던 자바스크립트 Deep Dive 이웅모 코어 자바스크립트 정재남 프레임워크 없는 프론트엔드 개발 프란세스코 스트라츨로 모두의 네트워크 미즈구치 카츠야

display:none과 visibility:hidden는 둘 다 요소를 안 보이게 하는 한다. 그럼 어떤 점이 다를까? 아래 박스를 가지고 테스트를 해보자 .box { border: 10px solid #3498db; padding: 20px; width: 100px; margin: 20px; display: inline-block; } .green { border-color: green; } .red { border-color: red; } Box2에 display:none 적용 .green { border-color: green; display: none; Box2에 visibility:hidden 적용 .green { border-color: green; visibility: hidden; } 적..

Table (1) Rows 을 사용하는 많은 프로그램에서는 에 대한 정의가 이미 되어 있으므로, 그 뜻은 데이터가 있는 행(row)과 열(column) 그리고 셀(cell)을 가지고 있어야 한다는 말입니다. 에 데이터를 넣기 위한 첫번째 단계는 행 요소인 을 이용해 행을 입력하는 것입니다. (2) Data 행만으로는 충분한 데이터를 에 넣지 못합니다. 각 셀의 요소도 정의해줘야 합니다. 이는 를 이용해 추가할 수 있습니다. 73 81 위 예제에는 73과 81이 한 행 안에 입력되었습니다. 두 데이터를 추가함으로써 우리는 두 cell 값을 입력하게 된 것입니다. 브라우저의 표에는 행이 하나고 열이 둘인 표가 됩니다. (3)Headings 은 데이터가 뭘 나타내고 있는지에 대한 제목이 없으면 의미가 없습니다..

2022-01-11 반응형 디자인 / CSS 코드의 재사용 반응형 디자인 화면의 크기에 따라서 각 요소들이 반응하여 동작하는 디자인을 뜻한다. 미디어 쿼리(Media Query) 어떤 조건을 만족할 때만 CSS의 내용이 동작하도록 하는 것이 가능하다. 화면 크기에 따라서 특정 요소를 보이거나 안 보이게 하려면 우선 이것의 크기가 어느 정도인지 알아야 한다. 웹페이지에서 오른쪽 클릭을 통해 구글개발자 도구의 검사를 들어가보자. 화면 크기를 조정할 경우 상단 우측 모서리에 화면 크기가 나온다. 특정 요소를 화면 사이즈에 따라 보이거나 안보이게 하는 코드는 아래와 같다. /* screen width < 800px n보다 작다면 최대가 n이란 뜻 */ @media (max-width : 800px) /* scr..

2022-01-10 박스모델 / 그리드 Padding 부분의 숫자를 더블 클릭하고 방향키 위,아래를 이용해 숫자를 변경할 수 있다. 실시간으로 바로바로 바뀌는 값을 확인 가능! #grid { display: grid; grid-template-columns: 160px 1fr; } #article { padding-left: 25px; } 가방 후보군 DANKER (댄커) DANKER (댄커) DANKER (댄커) 1. DANKER (댄커) (U0323CBP92) 🔗 브랜드 : DANKER (댄커) 가격 : 80,460 비고 : 노트북수납칸이 있음 그럼 하단 에 id값 article을 추가해주고, 웹페이지를 보면서 적당한 padding-left 값을 style에 추가해주도록 하자. #ol → #grid ..

2022-01-09 CSS 등장 이전의 상황 / CSS의 등장 / 혁명적 변화 / CSS 속성을 스스로 알아내는 방법 / CSS 선택자를 스스로 알아내는 방법 CSS의 시작 HTML에 디자인 태그를 추가하지만 한계를 깨닫고, 디자인에 최적화 된 완전히 새로운 언어를 만들은 것이 CSS 이다. 박스모델 우리가 원하고자 하는 레이아웃의 화면분할을 위해서 박스모델을 사용한다. Margin은 다른 Box Model과의 거리간격 Border은 Box Model의 경계선 Padding은 Context와 Border 와의 거리간격 Context는 Box Model의 내부 페이지 오른쪽 클릭을 했을 때 나오는 '검사'를 클릭하면 Box Model을 확인할 수 있다. 미래의 가방 후보군 1. DANKER (댄커) (U0..

2022-01-05 부모 자식과 목록 / 문서의 구조와 슈퍼스타들 / HTML 태그의 제왕 / 웹사이트 완성 1. 속해 있는 태그들 opentutorials parent 태그에 대해서 child 태그를 자식태그라고 부른다. 이처럼 한 태그에 대해 속해 있는 태그들이 있다. 1.금호 2.은하 3.동해 4.마요 태그는 태그를 꼭 필요로 한다. 목차는 영어로 list이고, 리스트를 만드는 태그는 이다. 그런데 누군가가 와서, 2.은하를 빼라고 한다. 그럼 우리는 중간에 끼여있는 2.은하를 빼고 다시 숫자를 붙여야 하는 상황이 되는데, 이럴 경우를 위해 이 존재한다. 정의와 쓰임새 태그는 순서가 있는 리스트를 정의한다. 순서가 있는 리스트는 숫자나 알파벳일 수 있다. 태그는 각각의 항목 리스트에 사용 된다. T..