위코드에서의 1일차 HTML/CSS 익히기 공부한 내용을 정리하면서 HTML과 CSS로 아래 속성들이 어떻게 표현되는지 직접 구현해보았다.(제목 링크 클릭) 1. position position 속성이란 요소의 위치를 정의할 때 쓰는 속성을 말한다. 주로 top,bottom,left,right 속성(이하 좌표 속성)과 함께 사용하여 위치를 지정한다. ...
Postion - 복잡한 레이아웃을 만들기 위해서는 postion 프로퍼티가 사용된다. position에서 사용하는 값은 4개가 있다. position: static; position: relative; position: absolute; position: fixed; 1. static positon:static;은 기본값이다. static은 위...
Heading & Paragraph - h1제목/h1 - Heading Tag : h1, h2, h3, h4, h5, h6 - 중요도에 따라 선택적으로 태그 사용. 숫자가 커질수록 중요도는 낮아진다. - p문단/p - Content등을 작성하는 태그. 흔하게 사용할 수 있음. Emphasis 문단 내 혹은 제목안에 특별히 강조하고 싶은 부분을...
When building web pages, we use a combination of non-semantic HTML and Semantic HTML. The word semantic means “relating to meaning,” so semantic elements provide information about the content between ...
Monologue 웹의 시각적인 부분을 구성하는 데에 있어서 디자인은 필수 불가결 한것이다. 따라서 웹을 업으로 하는 사람은 어느정도의 디자인에 대해서 알아야 하는 부분이 많다고 생각한다. 다양한 사람들의 디자인 원칙에 대해서 눈으로만 훑어보았지만, 글로만 읽어서 이해가 되지 않은 점들이 많았다. 일단, 모든 디자인 관련 문서는 개발 문서와 같이 분명한...
방대한 양의 데이터를 외부 서버에서 가져올 때, 백엔드에서 데이터 자체를 크롤링 해줄 수 있다. 모든 데이터를 일일이 api get을 request할 수 없으니, 한 번에 할 수 있는 방법이다. "상록"님의 수고로 아래와 같은 멋진 데이터 형식을 가져올 수 있었다. Screen Shot 2020-01-14 at 11.47.24 pm.png Vogue...
head 태그에는 무엇이 들어가야 할까? -사이트의 제목, 설명, 부가 정보, 기술적 내용(이 사이트는 주로 모바일용인지) meta charset="utf-8":한글, 일본어, 중국어가 포함된 페이지라면 utf-8이라는 값으로 문자 인코딩을 추가해줘야 함 meta name="viewport" content="width=device-width" : 디바이...
1. a tag (anchor tag) + target 속성 + self (기본 값) : 현재 페이지에서 외부 페이지로 이동하여 줍니다. + blank : 외부 페이지를 새로운 브라우저 창으로 뛰우는 방식으로 이동하여 줍니다. + href 속성 + 이동할 페이지의 주소가 올 수 있으며, 주소가 올 경우 해당 주소로 이동합니다. + 요소의 id도 올 수 ...
기본적인 html tag + 제목 태그(heading tag, h tag) + 문서내의 제목을 표현할 때 사용하는 태그 + 숫자가 낮을수록 큰 수준의 제목, 숫자가 높을수록 낮은 수준의 소제목을 나타날때 사용합니다. + 숫자는 1~6까지 있으나, 6까지 쓰는 경우는 거의 없습니다. + HTML 코드
1. 주석 + 실제로는 브라우저에 출력되지 않고 소스 코드상에 부가적인 정보를 기록하는데 사용합니다. + "! 주석 내용 "를 사용하여 주석을 남길 수 있습니다. + HTML 코드
HTML 표준을 제정하는 두 단체, 월드와이드웹컨소시엄(W3C)과 웹하이퍼텍스트애플리케이션기술 작업반(WHATWG)이 제각각 만들던 HTML과 문서객체모델(DOM) 규격을 단일 버전으로 내놓기로 했다. 뭐 어떻게 되었든 간에 좋은 소식이긴 하다. WC3 문서와 WHATWG 문서는 거의 똑같음에도 (자세히는 조금씩 다르다) 왜 서로 standard임을 강...
이 페이지에서 나온 코드를 실행한 페이지: http://marin.dothome.co.kr/2020Camp/class/html3.html DOCTYPE, encoding(charset)이 간단해졌다. 새롭게 생긴 elements: semantic element( header, footer, article, section) attributes of for...
사용자가 입력한 input을 수집하기 위해서는 form 태그를 사용해야 한다. form 태그는 입력받을 모든 input을 포함하도록 묶어야 한 번에 보내고 받을 수 있다. 이 글에 있는 코드들을 테스트 해놓은 페이지: http://marin.dothome.co.kr/2020Camp/class/html2.html form 태그의 attributes a...
dl과 웹 접근성 의문이 들었음. 왜 ul, ol이 있는데 dl이 있는 걸까? dl의 필요성 = ul을 많이 쓰니까 당연히 ul을 쓴다? = no 물론 크게 상관없지만, 실제 프로젝트에서는 태그마다 존재하는 목적을 잘 파악해야한다. = 결국 웹 접근성에 대한 이야기 유의미한 순서가 있는 list형 구조에서는 ol 태그, 그렇지 않다면 ul 태그 dl...
html에 사용되는 태그들을 모두 정리해놓은 글이다. 이 글에서 나오는 모든 소스코드와 실행 결과는 http://marin.dothome.co.kr/2020Camp/class/index.html 에 들어가면 볼 수 있다. html, head, body, style(background-color), h1, p, br HTML은 Hyper Text M...
script 태그는 어디에 위치하는 게 가장 좋을까요? 일단은 body 태그 최하단에 위치하는 게 가장 좋습니다. 이를 이해하기 위해선 브라우저의 동작 방식을 이해할 필요가 있습니다. 🔍 브라우저의 동작 방식 - 1. HTML을 읽기 시작한다. 2. HTML을 파싱한다. 3. DOM 트리를 생성한다. 4. Render 트리(DOM tree + C...
이글을 쓰기에 앞서, 이 프로젝트에서 개발된 서비스는 절대 배달의 민족의 사용성을 해치거나 클론 서비스를 개발하기위함이 아닌, 오직 팬심으로만 만든 '웹 콘셉트'라는것을 강조하겠습니다. 최근에 배달의 민족이 독일계 기업인 딜리버리히어로(DH)사에 인수되어 요기요와 배달통과 같은 회사 식구가 되게 되었다. 인수합병 기사를 보던 도중 예전에 가졌던 의문점인 ...