html

    VSCode (Visual Studio Code) HTML 자동 완성 (템플릿)

    코드 입력란에 HTML:5 입력 후 Enter키를 누르면 빠르게 HTML 템플릿을 구성할 수 있습니다.

    Reset.css

    웹 프론트엔드 개발을 할 때 reset.css라는 파일을 생성해 사용하곤 하는데, 보통 이 파일의 역할은 브라우저가 자동으로 설정해주는 태그들 예를 들어 , 등 자동적으로 스타일 속성이 적용되어 있는 모든 태그들의 속성을 제거하기 위해 사용합니다. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, ..

    CSS 가상 클래스 선택자 (Pseudo Selectors)

    기본적인 가상 클래스 선택자(Pseudo Selectors) 사용 방법 웹개발을 하다 보면 때때로 특정 요소를 규칙적으로 선택해 일정 패턴마다 CSS 옵션을 주는 방법이 있습니다. 이를 Js로 할 수도 있겠지만 CSS로도 해결 가능한 문제를 Js를 이용해 해결하는것은 리소스 낭비입니다. 가령 위와 같이 요소에 반복적인 CSS 패턴을 줘야 할 경우 아래 코드처럼 Pseudo Selectors를 이용하여 해결 가능합니다. hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello 위 코드처럼 태그 자체에 Pseudo Selectors 옵션을 주어 해결 할 수도 있겠지만 Class 혹은 ID에도 마찬가지로 적..

    CSS가 겹쳐서 발생하는 오류 해결 방법

    가끔 HTML CSS를 이용해 웹사이트를 개발하다보면 분명히 특정 요소에 대해 스타일 설정을 하였지만, 반영 되지 않고 이상한 스타일이 적용 될 때가 있습니다. 이럴 때는 HTML, CSS파일등에서 특정 요소에 대한 스타일 설정이 중복되지 않았나 체크해야합니다. 브라우저는 무조건적으로 코드를 위에서 아래로 해석하기때문에 특정 요소에 대한 스타일 설정이 중복된다면 반드시 가장 아래에 있는 설정이 적용되어 최종적으로 사용자에게 보여집니다. 간단한 예시로 설명을 해보자면 아래 코드는 전체 HTML 코드입니다. Hello, xeros! 아래 코드는 위 HTML에서 참조한 test.css 파일의 내용입니다. h1 { color: orange; } 이 두 코드 파일은 아래와 같은 디렉토리 Tree 구조를 가집니다...

    HTML 태그 종류 및 각 태그별 설명 정리

    Windows의 경우 Ctrl + F, MacOS의 경우 Command + F 단축키를 이용하여 원하는 태그를 검색하여 확인하시면 편리합니다. 메인 루트 요소 설명 HTML 요소는 HTML 문서의 루트(최상단 요소)를 나타내며, "루트 요소"라고도 부릅니다. 모든 다른 요소는 요소의 자식이어야 합니다. 문서 메타데이터 메타데이터는 스타일, 스크립트, 각종 소프트웨어(검색 엔진, 브라우저 등)의 탐색 및 렌더링을 도와줄 데이터 등 페이지에 대한 정보를 가집니다. 스타일과 스크립트 메타데이터는 페이지 안에서 정의할 수도 있고, 해당하는 정보를 가진 다른 파일로 링크할 수도 있습니다. 요소 설명 HTML 요소는 문서 안의 모든 상대 URL이 사용할 기준 URL을 지정합니다. 문서에는 하나의 요소만 존재할 수 ..

    HTML(Hyper Text Markup Language)이란 무엇인가?

    HTML이란 무엇인가? HTML은 Hyper Text Markup Language의 약어로 웹사이트를 구성할때 빠질 수 없는 요소중 하나입니다. 웹페이지의 뼈대를 구조하는 역할을 하는것이 바로 이 HTML입니다. HTML파일은 일반적으로 Document(문서) 파일로 분류되며 html, htm의 확장자 포맷을 가지고있으며, 웹페이지의 뼈대 역할을 하는 요소가 HTML입니다. 하지만 HTML만으로는 위 설명대로 일종의 문서파일에 지나지 않기에 이를 실체화하여 사용자가 눈으로 직접 확인할 수 있도록 렌더링해주는 프로그램이 웹 브라우저입니다. HTML 파일이 웹 브라우저에 제공되면, 웹 브라우저는 이 HTML을 해석해 사용자가 시각적으로 식별할 수 있는 형태로 렌더링 과정을 거치고 최종적으로 사용자는 View..

    CSS에서 color, background-color, background의 차이점

    color : 해당 요소의 텍스트 색상을 지정한다. background-color : 해당 요소의 배경색을 지정한다. background : 각 스타일을 개별적으로 지정하는 대신 색상, 이미지 또는 배경 이미지 속성을 한 줄에 해결한다. 아래 코드는 background의 예제 코드이다. background: #ffffff url("img_tree.png") no-repeat right top;

    CSS를 이용한 마우스 커서 모양 지정

    해당 포스트는 이 글을 인용해 작성되었습니다. 유용한 정보라 공유한다. 이 기능을 잘 이용하면 사용자가 마우스 커서의 아이콘만 보고도 클릭했을때 대충 어떤 기능이 동작하겠구나를 예측할 수 있게 만들수 있을것같다. Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help 아래 단어 위에 마우스 커서를 가져다 마우스 커서의 모양이 변경됩니다. Auto Crosshair Default Pointer Move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize ..