Atelier BiCute

HTML에서 목록은 ul, ol, li 태그를 사용하여 구현할 수 있습니다. ul 태그는 순서가 없는 목록을 표현하며, li 태그를 사용하여 각 항목을 구성합니다. ol 태그는 순서가 있는 목록을 표현하며, type 속성을 사용하여 숫자 또는 글자 등으로 표시되는 순서 형식을 지정할 수 있습니다. # 순서가 없는 목록 순서가 없는 목록(Unordered list)은 HTML에서 ul 태그를 사용하여 구현할 수 있습니다. 각 항목은 li 태그를 사용하여 구성합니다. 순서가 없는 목록은 글자 형식의 순서를 사용하지 않고, 구분 기호(bullet)로 각 항목을 구분합니다. 예: Item 1 Item 2 Item 3 # 순서가 있는 목록 순서가 있는 목록(Ordered list)은 HTML에서 ol 태그를 사용..

HTML의 텍스트 서식은 태그를 사용하여 문서의 텍스트를 서식적으로 표현하는 것을 말합니다. 예를 들어, 제목을 표시하기 위해서는 태그를, 굵은 글씨를 표시하기 위해서는 태그를, 기울어진 글씨를 표시하기 위해서는 태그를 사용할 수 있습니다. 이 외에도 다양한 태그가 있습니다. 예를 들어: : 단락을 표시하는 태그 : 줄바꿈을 표시하는 태그 : 점으로 구성된 목록을 표시하는 태그 : 숫자로 구성된 목록을 표시하는 태그 : 목록의 각 항목을 표시하는 태그 : 인용구를 표시하는 태그 HTML 태그를 사용하여 텍스트의 서식을 꾸며주면 웹 페이지를 더욱 깔끔하게 만들 수 있습니다. # 굵은 텍스트(Bold text) HTML에서 굵은 텍스트는 태그를 사용하여 표시할 수 있습니다. 굵은 텍스트는 글씨 굵기가 두껍게..

제목(Heading)은 웹 페이지에서 주요한 제목을 나타낼 때 사용됩니다. HTML에서 제목은 h1부터 h6 태그로 표현되며, h1은 가장 중요한 제목을, h6은 가장 적은 중요도를 나타냅니다. 단락(Paragraph)은 웹 페이지에서 텍스트를 작성할 때 사용되는 태그입니다. HTML에서 단락은 p 태그로 표현됩니다. 예: 메인 제목입니다 부제입니다 단락입니다. 이것은 또 다른 단락입니다. # 제목(Heading) tag HTML에서 제목 태그(h1~h6)는 웹 페이지의 구조와 내용을 나타내는데 사용됩니다. h1 태그는 웹 페이지의 최상위 제목을 나타내며, h2 태그는 h1의 하위 제목, h3 태그는 h2의 하위 제목 이런 식으로 계층 구조를 가집니다. 제목 태그는 다음과 같이 사용할 수 있습니다. 메인..

HTML의 기본 문서 구조는 다음과 같습니다: 1. DOCTYPE: HTML 문서에 대한 정의입니다. 2. HTML 요소: 모든 HTML 문서의 기본 요소입니다. 3. Head 요소: 브라우저에게 HTML 문서에 대한 정보를 제공합니다. 4. Body 요소: HTML 문서의 실제 콘텐츠가 포함되어 있습니다. 예: Hello World! This is my first HTML page. # DOCTYPE DOCTYPE 선언은 HTML 문서의 문서 타입을 지정하는 것입니다. 이 선언은 HTML 문서의 첫 라인에 위치하여야 하며, 브라우저에게 HTML 문서가 어떤 버전의 HTML을 사용하는지 알려줍니다. 예를 들어, HTML5 문서의 경우에는 다음과 같이 선언합니다: DOCTYPE은 프로젝트에서 사용할 HTM..

# HTML은 무엇인가? 현재 HTML은, 웹 페이지를 작성하는 데 가장 기본적인 도구로 평가됩니다. 하이퍼 텍스트 마크업 언어(Hypertext Markup Language)는 웹 페이지의 내용을 구조화하고 표시하기 위한 마크업 언어입니다. HTML은 텍스트, 이미지, 비디오, 테이블, 폼 등의 웹 페이지 요소를 구조화하는 태그를 사용합니다. 태그는 각 요소의 속성을 정의하는 역할을 합니다. HTML 태그를 사용하여 웹 페이지의 구조, 내용, 디자인 등을 정의할 수 있습니다. HTML은 브라우저를 통해서만 접근이 가능한 웹 페이지를 생성할 수 있습니다. HTML 파일은 .html 혹은 .htm 확장자를 가지며, 웹 서버에 업로드된 후 누구나 접근할 수 있습니다. HTML은 개인이나 회사, 기관 등이 웹..

VS Code를 이용해 코드를 작성하다보면 더미 텍스트를 입력하는 경우가 많은데 이때 Lorem ipsum을 emmet(단축키)을 이용해 많이 사용하게 됩니다. #1 lorem 가장 기본적인 사용방법입니다. lorem 입력후 엔터나 tap을 누르면 자동으로 문장이 작성되는데, 이 방법을 사용하게 되면 1줄에 약 200열 정도의 글자가 작성됩니다. 내용과 글의 양은 Emmet에서 미리 볼 수 있다 이렇게 작성하게되면 한줄로 길게 작성되는데, 우선 텍스트의 양을 원하는 만큼 잘라 내기도 해야 하고, 보기 좋게 하기위해선 하나하나 원하는 지점을 찾아 엔터를 쳐서 글을 끊어주기도 합니다. #2 lorem * (반복횟수) 추가로 로렘의 길이가 짧다고 생각할 경우 다음과 같이 *n 을 입력하는 것으로 내용을 더욱 ..

개인적으로 처음에는 절대적으로 기피했던 프레임워크에 대한 사용 빈도가 갈수록 높아지고 있다. 그러던 와중에 부트스트랩은 이제 좀 질려서 이번기회에 테일윈드CSS를 사용해보기로 했는데, 너무나 마음에 들어서 이런 글도 한번 적어보게 되었다. (이젠 테일윈드 없이는 코드를 짤수없는 몸이 되버렸다) CSS 프레임워크를 사용하는 이유는? 한줄로 요약하면 코드를 쉽고 간편하게 사용하기 위해서이다. 그게 정형화된 코드로 인하여 유지 보수가 편리할수도 있고, 협업할때 좋을수도 있으며, 재사용성이 높을수도 있다. 이유는 다양하지만 결국 쉽고 간편하게 쓰고싶기 때문에 사용하게 된다. #1 Bootstrap 장점도 많고 단점도 많은 가장 유명한 프레임워크. 일단 다른 장단점들 다 제쳐놓고 사용 방법이 가장 쉽다. 압도적..

#1 설치 다양한 설치 방법과 컴파일러가 존재하지만 VSCode를 사용하고 있다면, 확장 마켓플레이스에서 'Live Sass Compiler'를 검색하여 설치만 하면 모든 준비 과정은 끝입니다. * 각종 블로그에서 node.js설치부터 시작해서 이것저것 너무 건들여대는 설명이 많아서 이 글 적어봄. #2 사용방법 (1) CSS 파일을 사용하는것과 큰 차이는 없습니다. (2) 새로운 파일의 확장자를 *.scss로 생성하여 코드를 작성. (3) 웹 브라우저는 html, css, js만 읽을수 있기 때문에 scss로 작성된 파일은 웹 브라우저가 읽을수 있도록 변환(Compile)해줄 필요가 있습니다. (4) 컴파일을 하는 방법은 화면 하단의 Watch Sass 버튼을 클릭하면 끝. *만일 하단 바가 안보이면 ..

웹 개발을 하다 보면 이미지 소스가 필요한 경우가 상당히 많습니다. 매번 사이즈를 확인하고 작업 중인 폴더로 이미지를 옮기는 과정도 귀찮아지기 시작하는데... Unsplash에서 제공해주는 API를 이용하면 이러한 고민이 쉽게 해결됩니다. #1 Unsplash Developers 사이트 주소는 다음과 같습니다. https://unsplash.com/developers 개발자로 등록(Register as a developer)한 후 다양하게 사용하는 방법도 있지만, 웹 개발용 샘플 이미지만 사용할 거라면 등록은 물론이고 특별히 거쳐야 할 과정도 없어 매우 편리합니다. 예전에는 샘플 이미지와 함께 복붙만 하세요 처럼 샘플 이미지와 함께 디테일한 설명이 있었던 거 같은데, 다 사라진 거 같아서 정리할 겸 글을..

enterkeyhint는 모바일 가상키보드의 enter키에 표시되는 내용을 사용자에게 더욱 도움이 되는 형태로 지정해 줄 수 있습니다. #1 Enter (엔터) enterkeyhint="enter" 기본적으론 다음 줄로 행을 이동합니다 ios의 영문 키보드에선 return으로 표기됩니다. (*흔히 말하는 엔터가 ios에선 return이라 불립니다) #2 Done (완료) enterkeyhint="done" 일반적으로 더 이상 입력할 것이 없을때 사용. IME(입력기)가 닫힙니다. #3 Go (이동) enterkeyhint="go" 일반적으로 사용자가 입력한 텍스트의 대상으로 사용자를 데려가는 이동 작업에 사용 #4 Next (다음) enterkeyhint="next" 일반적으로 텍스트를 수락할 다음 필드..