html
-
HTML 기본 정리Let's Code/HTML・CSS 2020. 12. 30. 00:43
오랜만에 HTML을 복습하면서 기본 개념들을 한번에 정리하려고 한다. 이미 개념에 대해 알고 있다는 전제 하에, 급하게 작업할 때 빠르게 훑어볼 용도. HTML의 기본 구조 HTML은 프로그래밍 언어가 아닌, 프로그램의 구조를 명시하기 위한 마크업 언어Markup Language이다. HTML의 기본 단위는 Element이며, Element는 주로 Opening tag / 사이에 오는 Content / Closing tag의 구조를 가진다. Closing tag의 경우 /로 구분한다. 이 중 content Tag 하나로만 존재하는 경우 Empty tag라고 부른다. (ex. ) 주로 하나의 HTML 문서는 하기와 같은 구조를 가지고 있다. 은 컴퓨터가 해석할 수 있도록 html의 특정 버전을 알려주는 태..
-
웹이 구현되는 과정Let's Code/Server 2019. 8. 25. 15:33
웹이 구현되는 과정을 간단하게 정리하겠습니다. 우선 인터넷이란 것이 무엇인지, 서버와 클라이언트가 무엇인지, 프론트엔드와 백엔드는 어떻게 구분되는지 정리한 후, 웹이 유저에게 전달되기까지의 작동 원리를 요약하겠습니다. 해당 내용은 네이버의 부스트코스를 정리 + 강의에서 제공되는 별도의 링크를 번역/정리했습니다. 1. Intro to HTTP 용어 정의 인터넷: 네트워크들의 네트워크라 할 수 있다. LAN보다 더 폭넓은 개념. HTTP: 서버와 클라이언트가 데이터를 주고 받기 위한 프로토콜로, 서로 통신하기 위해 사용하는 일정한 양식이다. URL: Uniform Resource Locator의 약자로, 1) 접근 포로토콜://IP 주소로 표현되기도 하며 2) 도메인 이름/문서 경로/문서 이름과 같이 도메인..
-
CSS로 조건부 코드 짜기Let's Code/HTML・CSS 2019. 8. 20. 23:32
개인적으로 느끼는 파이썬과 CSS의 차이 (얼마 안 배웠지만) 파이썬에서는 조건부를 if 또는 for로 구현하곤 했었다. HTML이나 CSS에서는 파이썬과 같은 문장 느낌의 직관적인 코드 대신 명사 위주가 많다는 게 개인적인 감상. 예를 들어 파이썬에서 = 이 있었다면 여기서는 :이 있는 느낌? 파이썬에서는 width가 뭔지 지정해준 후, if width > 800 grid(width) 하고 들여쓰기 한 뒤 코드를 짜주면 코드가 성립한다. grid() function은 존재하지 않지만 있다고 치자. CSS에서는 유사한 표현을 @media(min-width:800px) { #grid { display: grid; } } 이렇게 표현한다. 굉장히 문장 같지 않고 단어식이다. 파이썬이 조건문을 작성하는 식이었..
-
CSS : 그리드 미리보기Let's Code/HTML・CSS 2019. 8. 19. 21:58
참조: 그리드 - 생활코딩 이번 강의의 결과물 이번 강의를 통해 알게 된 것 div의 존재 HTML/CSS에는 위계질서가 중요하다! 1. div 태그 태그는 '태그를 위한 태그'로서, 그 자체로는 아무 의미를 가지지 않는다. 여러 태그들을 하나의 클래스 또는 아이디로 감싸고 싶을 때, 또는 그러한 묶음을 하나의 요소로 지정하고 싶을 때 '포장지' 같은 개념으로 사용한다. 이 때, block level의 경우 , in-line의 경우 을 흔히 쓴다고 한다. 2. 코드 간 계층 물론 이 때의 위계질서란 직급이 아니라, 어떤 코드가 '선행'하는지, 또는 어떤 코드를 '포함'하는지의 여부이다. 메뉴 강연 읽을거리 충전 강연 제가 들은 강연을 정리해놓았습니다. 커리어연세에서 열리는 강의, CP Team에서 열어준..