본문 바로가기

Mark Up26

[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.
[CSS] Chapter 14. CSS Position(relative, absolute) 한 방에 정리 CSS Position position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정한다. top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다. 사용법은 간단하다. 기준을 잡는다. (예- position: relative;) 이동시킨다. (예- top: 50px;) 알아두기 block : 한 줄 모두 차지 (대표 element - , ) inline : 콘텐츠 크기 만큼만 차지 (대표 element - ) Position 속성 요소를 옮기려면 일단 위치를 옮길 기준점을 잡는다. static 기준 없음 (배치 불가능 / 기본값) relative 요소 자기 자신을 기준으로 배치 absolute 부모(조상) 요소를 기준으로 배치 fixed 뷰포트 기준으로 배치 stick.. 2023. 4. 18.
[SASS] Chapter 01. sass(scss) sass(scss) : css의 확장 언어 css보다 조금 더 높은 자유도를 개발자들에게 부여 변수, 반복문, 가정문 등 다양하고 강력한 기능을 제공 그래서 기능적으로 자유도는 높지만, 역설적이게도 그만큼 많은 학습이 요구된다. 브라우저가 읽을 수 있는 언어는 3가지 뿐이다. (html, js, css) sass, scss는 브라우저가 읽을 수 없는 확장자다. 그래서 sass(scss) 확장자로 된 파일을 css 파일로 컴파일(변환)시켜주는 과정이 필요하다. 2023. 1. 9.
[CSS] Chapter 13. 브라우저 크기마다 CSS가 바뀌는 Media Query .box { width: 100%; height: 100px; border: 4px solid red; } @media screen and (max-width: 1260px) { .box { width: 90%; background-color: red; } } // 테블릿 화면 @media screen and (max-width: 768px) { .box { width: 80%; background-color: blue; } } // 모바일 브라우저 @media screen and (max-width: 576px) { .box { background-color: greend; } } media query는 css 맨 마지막에 사용된다. 왜 그러느냐? css는 맨 마지막에 있는 것들이 적용되기 때문에. 2023. 1. 7.
[CSS] Chapter 12. Position(static, relative, absolute, fixed, sticky), z-index, overflow position 요소를 어떻게 배치할지 결정하는 CSS 속성 우선 Normal Flow 개념을 이해하는 것이 중요함 Normal Flow란? 요소의 레이아웃을 전혀 제어하지 않았을 때, 브라우저에서 기본적으로 요소가 배치되는 흐름 Remind) 인라인 요소, 블록 레벨 요소 등 특성에 따라 기본적으로 요소가 배치되는 방식이 있음 즉 요소의 특성에 따라 Normal Flow가 정해져 있는 것 코드에 작성된 순서에 맞게 차곡차곡 HTML 요소가 표시된다. positon 속성을 통해 Normal Flow에서 벗어나, 개발자가 원하는 대로 제어하여 배치할 수 있음 position 속성은 top, bottom, left, right 속성과 함께 사용함 position의 종류에 따라 top, bottom, left.. 2023. 1. 6.
[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.
[CSS] Chapter 11. 레이아웃 만들기 - grid 3. grid .container { width: 400px; height: 600px; border: 1px solid black; } .top { background: red; width: 400px; height: 200px; } .left { background: blue; width: 200px; height: 200px; } .right { background: green; width: 200px; height: 200px; } .bottom { background: purple; width: 400px; height: 200px; } grid로 정렬하는 방법은 제일 최신에 나온 방법이다. grid 같은 경우는 공간을 이미 다 격자로 나누어놓은 다음에 그 격자에 해당하는 것만큼 채워주는 방식으.. 2022. 12. 29.
[CSS] Chapter 10. 레이아웃 만들기 - float 2. float 정렬 .container { width: 400px; height: 600px; border: 1px solid black; } .top { background: red; width: 400px; height: 200px; } .left { background: blue; width: 200px; height: 200px; } .right { background: green; width: 200px; height: 200px; } .bottom { background: purple; width: 400px; height: 200px; } float 속성이 있는데 이것은 레이아웃 배치를 위해서 만들어진 속성이다. html의 모든 태그들은 float이 디폴트로 none으로 부여되어 있다. 정.. 2022. 12. 29.

티스토리툴바