Mark Up/HTML11 [HTML] Chapter 11. VS Code 작업 속도 향상을 위한 Emmet 단축키 및 트릭 9가지 사용법 기본적으로 VS Code에서 HTML 파일 안에서 다음과 같은 단축키 입력 후“tab”키를 쳐서 사용 유용한 단축키 정리 1. HTML5 boilerplate (표준문서): 2가지 방법 “!”치고 “tab”; 또는 “HTML”입력 후 “HTML:5” 선택 Emmet | HTML5 boilerplate (표준문서) 생성 2. 하위 요소 생성: “>” 사용 /* 예: */ header>ul>li Emmet | 하위 요소 생성 3. 동급 요소 생성: “+” 사용 /* 예: */ section>article>h2+p Emmet | 동급 요소 생성 4. 반복 태그 생성: “*” 사용 /* 예: */ ul>li*5 Emmet | 반복 태그 생성 5. CSS class 와 id 설정: “.” 와 “#”사용 /.. 2023. 4. 18. [HTML] Chapter 10. 이모티콘_svg(vector data), fontawesome, bootstrap 버튼 보이기엔 둘 다 같지만, 차이점이 있다. button 태그의 컨텐츠로 "버튼"을 주는 것 input 태그의 value로 "버튼"을 주는 것 무슨 뜻이냐 하면 input 태그에는 value 안에 "버튼" 이라는 속성을 통해서 text를 전달해야 한다. 그런데 button 태그는 여는 태그와 닫는 태그로 이루어져 있고, 컨텐츠를 받을 수 있기 때문에 다른 태그가 들어가도 무방하다. (일반적으로 잘 사용하진 않는다) 그 말은 button 태그에 img가 들어가도 되는 것이다. 그래서 어떤 이미지를 버튼처럼 만들고 싶을 때 input 태그에 버튼을 사용하는 것이 아니라, button 태그를 통해서 img 태그를 넣어 만들 수 있다. 하지만 button 안에 img를 넣을 때는 일반적인 이미지가 아니라 이모.. 2023. 1. 4. [HTML] Chapter 09. 웹 어플리케이션과 정보를 제출할 땐 form 웹 어플리케이션 웹 페이지라 하는 것은 html, css를 통해서 정적인 콘텐츠를 웹 페이지에 방문하는 사용자들에게 단순히 보여주기만 한다. 그런데 우리가 사용하는 웹 어플리케이션이라고 하는 것은 정적이 아닌 동적인 콘텐츠로서 글에 댓글을 쓴다거나 좋아요를 누르는 등, 사용자와 소통할 수 있는 방법이 있다. 그런 의미에서 우리가 단순하게 콘텐츠를 보여주게 되는 것은 우리의 웹 페이지가 웹 사이트로 분류되고, 우리의 웹 페이지에서 사용자와 소통할 수 있게 되면 그 때부터 웹 어플리케이션이라고 부를 수 있는 것이다. 그래서 필요 시 javascript를 배우는 것이다. 프로그래밍을 배울 때, Front-End 영역이 진입장벽이 낮다, 쉽다 라는 말을 한 번 쯤은 들어본 적이 있을 것이다. 나는 그런말이 나오.. 2023. 1. 4. [HTML] Chapter 08. head 태그를 구성하는 요소들 1. css 파일들 2. style 3. title 타이틀 4. meta 어떤 방식으로 렌더링되는지 설정 웹 사이트에 대한 일방적인 설명 웹 사이트에서 담고있는 내용이 어떤 keyword에 대한 설명 누가 만들었는지 기기 별로 비율이 다른데, 비율을 맞추는 용도 사용자 눈에 보이지는 않지만, html 파일에 대한 부가적인 설명을 담고있다. 배포된 html 파일 url을 다른 곳에 첨부했을 때, 나오는 내용들을 정의해줄 수 있고, 검색 솔루션(구글, 네이버 등)에서 어떤 웹사이트인가 판단할 수 있게 도와주는 SEO(검색 최적화)에 도움을 주는 태그이다. 5. favicon ico 2023. 1. 4. [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. [HTML] Chapter 04. 시멘틱 웹 시멘틱 웹(Semantic Web) Semantic : 의미의, 의미론적인 요소의 의미를 고려하여, 구조를 설계하고 코드를 작성한다. non-semantic(div, span) non-semantic 태그를 사용하기 전에, "과연 이게 non-semantic 태그 밖에 사용할 수 없는 것일까?" 내부에 담긴 콘텐츠들이 의미를 갖고있다면 그 의미에 적합한 태그를 사용하는 고민을 해볼 것. 의미론적인 마크업을 사용하면 아래와 같은 이점이 있다. 검색 엔진은 의미론적 마크업을 분석하여 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다. 시각 장애가 있는 사용자가 스크린리더로 페이지를 탐색할 때, 의미론적 마크업을 푯말로 사용할 수 있다. 의미가 없는 끊임없는 div들을 탐색하는 것보다, 의미있.. 2022. 11. 18. [HTML] Chapter 03. 콘텐츠 블록(Block)과 인라인(Inline) 블록 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다. 상자를 아래로 쌓는 것 인라인(Inline) 인라인 요소는 줄의 어느 곳에서나 시작할 수 있다. 바로 이전 요소가 끝나는 지점부터 시작하여, 요소의 내용(content)만큼만 차지한다. 차이점 블록은 자기가 차지할 수 있는 가로를 죄다 차지하는 반면, 인라인은 컨텐츠가 가지고 있는 공간 만큼만 차지한다. 포함 규칙 - 같은 형태의 다른 요소를 안에 포함할 수 있다. (블록 > 블록, 인라인 > 인라인) - 대부분의 블록 요소는 다른 인라인 요소도 안에 포함할 수 있다. - 인라인 요소는 블록 요소를 포함 할 수 없다. ("자식이 부모를 가질 수 없다".. 2022. 11. 15. [HTML] Chapter 02. HTML 문서의 구조 빈 요소 (Empty Elements) 내용(content)이 없다면? → 이미지 , 수평선 , 줄바꿈 등 내용이 없는 요소를 빈 요소(Empty Element)라 부른다. 이 경우, 닫는 태그를 추가로 명시하지 않아도 된다. Empty element, Self-Closing element, Void element, Single tag ... 예시 만약 를 한다고 해서, 빈 요소가 될 수 없다. 빈 요소를 쓸 수 있는 태그들은 태어날 때 부터 웹표준에 정의되어있다. HTML 문서의 구조 html : 페이지 전체의 컨텐츠를 감싸는 루트(root) 요소 head : 웹브라우저 화면에 직접적으로 나타나진 않는 웹페이지의 정보 meta tag : 문서의 일반적인 정보와 문자 인코딩을 명시 body : 웹브라우저.. 2022. 11. 10. 이전 1 2 다음
