Html과 CSS/Html 첫 걸음 4

1초만에 Emmet으로 HTML 기본 구조 생성하기!

안녕하세요. WooJi입니다.무더운 날씨에 쉽게 지치는 요즘입니다.오늘은 마크업 언어 작성을 획기적으로 개선해 주는 도구, 에밋(Emmet)에 대해 알아보겠습니다.에밋의 정의에밋은 코드 편집기에서 사용할 수 있는 강력한 도구로, HTML, CSS 등의 마크업 언어 코드를 빠르게 작성할 수 있게 해 줍니다.에밋은 약어와 축약어를 사용하여 복잡한 코드를 간단한 문법으로 표현할 수 있게 해주는 플러그인 또는 확장 기능입니다.에밋의 작동 원리에밋은 약어와 축약어를 사용하여 복잡한 코드를 간단한 문법으로 표현할 수 있게 해 줍니다. 에밋 문법을 통해 입력한 내용은 실제 HTML/CSS 코드로 변환되어 적용됩니다.에밋의 장점에밋을 사용하면 다음과 같은 장점을 누릴 수 있습니다:생산성 향상: 반복적인 코드 작성 작업..

HTML 태그에 대해 알아보자! - 구조,속성,활용법

안녕하세요! Wooji입니다.오늘은 HTML 태그에 대해 알아봅시다.HTML은 웹문서에 마크업 하는 언어입니다. 마크업이란 어디가 이미지고 어디가 텍스트인지 표시해 주는 것을 의미하는데 이때 약속된 표기법을 태그라고 하는 것이죠.그럼 태그의 특징과 활용에 대해 알아봅시다!를 이용해 구분태그는 꺾쇠 괄호 를 사용해 구분됩니다. 예를 들어서, "사진을 표시해주고 싶다"면 image의 약자인 로 표기해 주는 것이죠. 이렇게 로 구분해 주면 컴퓨터에서 해당 부분이 사진이구나 하고 인식하는 겁니다.그래서 사이에 있는 문자는 태그로 인식한다는 점을 기억해야 합니다.  태그 안의 문자는 모두 소문자로 작성태그 안의 문자는 소문자로 작성하라는 것은 사실 권장 사항입니다. HTML태그가 대소문자를 구분하지는 않습니다...

HTML 개발환경 구축하기: Visual Studio Code와 Live Server로 시작하는 HTML 코딩

안녕하세요. WooJi입니다.HTML에 대해 본격적으로 시작해 볼까요?HTML 기초 공부를 시작하면서 가장 먼저 해야 할 일은 개발 환경을 구축하는 것이겠죠? 개발 환경 구축하기오늘은 HTML 코딩을 위한 편집기 설치와 실시간 미리 보기 기능 사용법을 알아보도록 하겠습니다.HTML 공부를 위해 Visual Studio Code라는 코드 편집기를 사용할 계획입니다.Visual Studio Code는 무료로 사용할 수 있는 강력한 코드 편집기로, HTML, CSS, JavaScript 등 다양한 언어를 지원합니다. 비주얼 스튜디오 코드를 설치는 다들 할 줄 아신다고 생각합니다. 바로 Live Server 설치로 들어가 보겠습니다!  Live Server 확장 설치하기Live Server를 사용하면 HTML ..

HTML 기초 공부, Tistory 스킨 제작을 위한 첫걸음

안녕하세요! WooJi입니다!군대 전역을 한 지 13일차입니다. 역시 사회가 좋네요.오늘부터 HTML 공부를 시작해보려 합니다. HTML공부를 시작하게 된 이유?HTML 공부를 시작하게 된 계기는 Tistory 블로그를 만들면서 단순히 주어진 스킨만을 사용해왔었는데 원래 직접 나만의 스킨을 만들어 블로그를 운영해보고 싶은 꿈이 있었습니다. 작은 꿈이지만 실현해보고자 HTML 기초부터 차근차근 공부해나가기로 결심했죠. 단순히 보여지는 화면만 관리하는 것이 아니라, 웹 페이지의 구조와 내용을 직접 다룰 수 있게 되면 블로그 운영에 있어 훨씬 더 자유로워질 수 있을 것 같습니다. HTML 공부는 어떻게?알라딘 중고 서점에서  우연히 Doit 시리즈의  "HTML5+CSS3 웹표준의 정석"를 발견하게 되어 구매..

반응형