업장 업장

마지막! 4탄입니다. 정말 찐으로! 가~장 많이 사용하는 div, span 요소로 마무리해볼게요~! 7. 의미 없는 요소 , 의미를 따로 가지지 않아 언제든 사용할 수 있는 태그들입니다. 주로 요소들을 묶어 스타일을 주거나 텍스트에 스타일을 주기 위해 사용합니다. 그럼 문서 전체를 div, span 태그만으로 구성해도 될까요? 네! 가능합니다! 하지만 시맨틱 마크업에 어긋나기 때문에 W3C에서도 남발하는 것을 지양하라고 권고하고 있습니다. W3C NOTE 발췌(https://www.w3.org/TR/2011/WD-html5-author-20110809/the-div-element.html) Authors are strongly encouraged to view the div element as an el..

앞선 2탄에 이은 3탄입니다! 5. 리스트 요소 , , ol 태그는 순서가 있는 리스트를 만들 때, ul 태그는 순서가 없는 리스트를 만들 때 사용하는 태그입니다. 순서가 있는 리스트에는 랭킹이나 작동 순서, 레시피 순서 등이 해당합니다. 아래 예시 코드처럼 순서가 중요하지 않은 리스트는 ul로, 순서가 중요한 리스트는 ol로 작성합니다. 하위에는 각 아이템을 li 태그로 묶어 작성합니다. 삶은 계란 준비물 계란 냄비 물 삶은 계란 레시피 계란이 잠길 정도의 물을 끓인다 물이 끓으면 계란을 넣는다 13분 후 계란을 건져낸다 찬물에 담근 후 껍질을 깐다 ol과 ul을 사용하지 않고 리스트를 만드는 페이지도 많은 편이긴 하지만, 조금만 더 신경써서 사용해주면 웹접근성을 높일 수 있기 때문에 ul/ol 구분해..

앞선 1탄에 이은 2탄입니다! 이번에는 클릭할 수 있는 요소들 위주로 설명드리겠습니다~! 3. 링크/앵커 요소 '웹을 이해하는 마크업 개발자' 글에서도 언급했듯이 웹페이지는 하이퍼텍스트와 하이퍼링크로 이루어져있습니다. 수많은 웹페이지를 서로 연결시키는 이 하이퍼링크는 a 요소로 구현할 수 있습니다. 구글로 이동 a 태그에 필수 속성인 href 속성을 추가하여 속성값으로 URL을 넣어주면 a 요소 클릭 시 해당 URL로 이동합니다. a 요소 내에는 텍스트 외에도 이미지 등 다양한 요소들이 자식 요소로 올 수 있습니다. 자주 쓰이는 a 태그 속성은 target 입니다. target 속성을 통해 링크된 URL을 어떤 방식으로 열지 지정할 수 있습니다. target 속성을 선언하지 않으면, 기본적으로 _self..

그간 셀 수 없이 많은 페이지를 마크업하고 배포해온 실무자로서 마크업하면서 이건 꼭 알아야한다! 자주 쓰인다! 하는 태그들을 몇가지 뽑아봤습니다. (나열 순서는 큰 의미 없습니다~!) 1. 제목 요소 ~ 페이지의 제목, 섹션의 제목에 사용하는 태그들입니다. 부터 순서대로 까지 사용할 수 있는데, 숫자가 작을 수록 큰 분류의 제목입니다. 태그는 주로 웹사이트의 제목에 사용하는 편이며, 한 페이지에 딱 한번만 사용되어야합니다. 태그를 사용하지 않고 태그부터 사용하는 것도 웹 표준에 어긋나므로 부터 순서대로 사용해주셔야 합니다. 예시로 W3C 웹페이지에서 h1 요소를 찾아봤습니다. h1 요소에 W3C 로고와 대체 텍스트를 추가해서 해당 웹페이지가 W3C의 웹페이지라는 것을 나타내고 있네요. h1 요소 뿐만 아..

HTML은 처음부터 끝까지 태그로 구성되어 있습니다. 🏷 태그(tag) 태그란 해당 콘텐츠가 어떤 내용을 의미하는지 알려주는 역할을 합니다. 컴퓨터로 글 문서를 작성할 때도 제목/본문/굵게/강조 등을 구분하며 작성하듯 HTML도 다양한 목적에 맞춰 태그를 골라 사용할 수 있습니다. 하나의 태그는 기본적으로 '', '/' 세가지 기호로 구성되는데, 가장 많이 사용되는 div 태그를 예로 들면 아래와 같이 표현합니다. 내용 입력 문법은 간단합니다. 여는 태그와 닫는 태그 여는 태그와 닫는 태그 구조는 HTML의 가장 일반적인 문법입니다. 여는 태그() + 닫는 태그() 사이에 화면에 노출시킬 내용을 입력합니다. 화면에 노출시킬 내용 이때 여는 태그와 닫는 태그는 꼭 한 쌍을 이뤄야 합니다. 하나라도 빠지면 ..

앞선 글에서 간단한 HTML 작성을 통해 웹페이지를 만들어봤는데요. 이번 글에서는 작성된 한줄 한줄이 각각 무슨 의미를 담고 있는지 설명드리려고 합니다. 여기는 업장입니다 HTML 문서 최상단에 작성해주어야하는 필수 요소입니다. 표준모드로 렌더링하겠다는 표현인데, 다른 모드는 모르셔도 되고 그냥 이대로 작성해주시면 됩니다~! ... 요소는 html 문서의 뿌리와 같은 요소입니다. 그래서 루트 요소라고도 부릅니다~! 요소는 필수 요소로 2번째줄과 가장 마지막줄에 작성해주셔야 합니다. 이렇게 괄호로 싸여진 것을 태그라고 지칭하는데, 시작을 의미하는 열린 태그(Opening tag)와 끝을 의미하는 닫힌 태그(Closing tag)로 구성됩니다. 그리고 이를 하나의 요소(Element)라고 표현합니다. 출처:..

HTML HTML이 어떤 단어의 약어인지 알고 시작하면 HTML의 개념이 좀 더 쉽게 느껴집니다. Hypertext Markup Language '하이퍼텍스트 마크업 언어'로, 직역하면 한 문서에서 다른 문서로 바로 접근할 수 있는 텍스트를 마크업하는 언어 입니다. 이 HTML로 웹페이지를 만들 수 있습니다. 웹페이지 생성하기 바로 웹페이지를 한번 만들어볼까요? 웹 개발 툴 웹페이지를 만드려면 텍스트 에디터나 IDE(통합개발환경) 이용해야합니다. 툴이 워낙 다양하고 특성도 달라서 본인에게 맞는 툴을 사용하면 됩니다. 무료 툴 몇가지 추천해드릴게요! Sublime Text https://www.sublimetext.com/ Visual Studio Code https://code.visualstudio.c..