본문 바로가기

🔗 HTML & CSS11

Display Property : inline, block, inline-block Display Display 속성은 각 요소들이 렌더링 되어지는 화면 표기 방법을 결정할 수 있다. 속성들 중 none, inline, inline-block, block 4가지가 주로 쓰인다. HTML에서 기본 표시 값은 HTML 사양이나 브라우저나 유저의 기본 스타일 시트에서 가져오는데, XML의 기본값은 SVG 요소를 포함한 inline이다. 💡 XML ? : eXtensible Markup Language로 W3C에서 개발된 다목적 마크업 언어이다. 인터넷에 연결된 시스템끼리 데이터를 쉽게 주고 받을 수 있게 HTML의 한계를 극복할 목적으로 만들어 졌다. 💡 SVG ? : Scalable Vector Graphics. XML에 기반하여 벡터 그래픽을 표현하기 위해 개발된 그래픽 파일 형식이다. .. 2022. 4. 26.
CSS Layout - Position 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;로 지정 된 요소는 기존의 위치를 기준으로.. 2022. 4. 26.
About Semantic Semantic Semantic 자체의 영어 뜻은 다음과 같다. 프로그래밍에서는 코드 조각의 의미를 나타낸다고 한다. "이게 어떻게 시각적으로 보여질까?" 가 아닌 "이 JS 코드 라인을 실행하는 것은 어떤 효과가 있는가?" 혹은 "이 HTML 요소가 가진 목적/역할은 무엇인가?" 에 대한 것이다. Semantic Web ? 그럼 Semantic Web이 뜻하는 바는 무엇일까? 해당 사이트에 따르면 현재 인터넷 사용자 수는 52억이고, 웹사이트는 19억개가 넘는다. www.internetlivestats.com 에 들어가면 실시간으로 움직이는 숫자들을 볼 수 있다. 그럼 이 수많은 사용자와 사이트들 사이에서 살아남기 위해선 어떻게 해야할까? 바로 검색이다. SEO Search Engine Optimiza.. 2022. 4. 26.
display:none 과 visibility:hidden 의 차이 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; } 적.. 2022. 1. 28.
CodeAcademy - HTML Table Table (1) Rows 을 사용하는 많은 프로그램에서는 에 대한 정의가 이미 되어 있으므로, 그 뜻은 데이터가 있는 행(row)과 열(column) 그리고 셀(cell)을 가지고 있어야 한다는 말입니다. 에 데이터를 넣기 위한 첫번째 단계는 행 요소인 을 이용해 행을 입력하는 것입니다. (2) Data 행만으로는 충분한 데이터를 에 넣지 못합니다. 각 셀의 요소도 정의해줘야 합니다. 이는 를 이용해 추가할 수 있습니다. 73 81 위 예제에는 73과 81이 한 행 안에 입력되었습니다. 두 데이터를 추가함으로써 우리는 두 cell 값을 입력하게 된 것입니다. 브라우저의 표에는 행이 하나고 열이 둘인 표가 됩니다. (3)Headings 은 데이터가 뭘 나타내고 있는지에 대한 제목이 없으면 의미가 없습니다.. 2022. 1. 12.
생활코딩 WEB2 - CSS (3) 2022-01-11 반응형 디자인 / CSS 코드의 재사용 반응형 디자인 화면의 크기에 따라서 각 요소들이 반응하여 동작하는 디자인을 뜻한다. 미디어 쿼리(Media Query) 어떤 조건을 만족할 때만 CSS의 내용이 동작하도록 하는 것이 가능하다. 화면 크기에 따라서 특정 요소를 보이거나 안 보이게 하려면 우선 이것의 크기가 어느 정도인지 알아야 한다. 웹페이지에서 오른쪽 클릭을 통해 구글개발자 도구의 검사를 들어가보자. 화면 크기를 조정할 경우 상단 우측 모서리에 화면 크기가 나온다. 특정 요소를 화면 사이즈에 따라 보이거나 안보이게 하는 코드는 아래와 같다. /* screen width < 800px n보다 작다면 최대가 n이란 뜻 */ @media (max-width : 800px) /* scr.. 2022. 1. 11.
생활코딩 WEB2 - CSS (2) 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. 1. 10.
생활코딩 WEB2 - CSS (1) 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. 1. 9.
생활코딩 WEB1 - HTML & Internet (3) 2022-01-05 부모 자식과 목록 / 문서의 구조와 슈퍼스타들 / HTML 태그의 제왕 / 웹사이트 완성 1. 속해 있는 태그들 opentutorials parent 태그에 대해서 child 태그를 자식태그라고 부른다. 이처럼 한 태그에 대해 속해 있는 태그들이 있다. 1.금호 2.은하 3.동해 4.마요 태그는 태그를 꼭 필요로 한다. 목차는 영어로 list이고, 리스트를 만드는 태그는 이다. 그런데 누군가가 와서, 2.은하를 빼라고 한다. 그럼 우리는 중간에 끼여있는 2.은하를 빼고 다시 숫자를 붙여야 하는 상황이 되는데, 이럴 경우를 위해 이 존재한다. 정의와 쓰임새 태그는 순서가 있는 리스트를 정의한다. 순서가 있는 리스트는 숫자나 알파벳일 수 있다. 태그는 각각의 항목 리스트에 사용 된다. T.. 2022. 1. 5.
생활코딩 WEB1 - HTML & Internet (2) 2022-01-04 혁명적인 변화 / 통계에 기반한 학습 / 줄바꿈 / HTML이 중요한 이유 / 최후의 문법 속성과 img 1. 태그 공부하기 https://www.w3.org/ World Wide Web Consortium (W3C) Happy holidays from the World Wide Web Consortium! 13 December 2021 | Archive As 2021 is drawing to an end, and the impact of the global pandemic continues to be a weighty blow, this is the second year the W3C community has not really seen each other. Yet, www.w3.o.. 2022. 1. 4.
생활코딩 WEB1 - HTML & Internet (1) 2022-01-03 프로젝트의 동기 / 기획 / 코딩과 HTML / HTML 코딩 실습 환경 준비 / 기본 문법 - 태그 JAVA를 독학해보려고 하다가 알게 된 생활코딩! https://opentutorials.org/course JAVA 첫 강의를 보려는데 선행 학습으로 WEB1 강의를 우선 보면 좋다고 적혀있어서 시작하게 되었다. 아직까지는 목표로 하는 방향성(프론트엔드/백엔드)이 없어서 이것저것 다 해보면 좋을 것 같다고 생각하기에 완강을 목표로 시작해본다. 이 강의를 완강할 때 쯤이면 나는 무엇을 할 수 있을까? 부디 지치지 않고 매 강의에 흥미를 느끼며 개발을 사랑하는 개발자가 될 수 있기를 바란다 💫 오늘의 배움 Hypertext Markup Language (HTML) is the stand.. 2022. 1. 4.

티스토리툴바