지식공유32 HTML 태그(tag)의 사용방법 HTML 문서는 기본적으로 수많은 태그(Tag)들로 이루어져 있다. 그리고 그 태그들은 모두 각각의 의미를 가지고있기 때문에, 문서 위치나 상황에 맞게끔 적절히 잘 사용을 해야한다. 물론 추후에 코드작성을 하고 실제로 웹페이지로 확인했을때 이 태그를 쓰나 저 태그를 쓰나 보여지는건 똑같을 수 있다. 하지만 초반에도 언급했듯이 HTML은 단순히 보여지는 웹페이지를 디자인 하기 위한 목적으로 사용하는것 아닌 엄연한 '문서'로써 웹표준 및 웹접근성을 준수하여 작성을 하여야 하기 때문에 태그의 종류를 바로 알고 바로 사용해야 한다. [태그(tag) 사용법] 기본적으로 태그는 꺽쇠를 사용하여 표현하고, 예외도 있지만 열고 다는 부분이 있다. - 여는부분 : - 닫는부분 : (태그 앞에 '/'가 추가됐다) 문단 위.. 2022. 7. 12. DOM(Document Object Model), BOM(Browser Object Model) 브라우저 객체 모델(BOM / Browser Object Model) - 브라우저에 접근할 수 있는 객체 모델이다 - BOM의 최상위 객체는 window이다 - window, navigator, history, location, document 등 문서 객체 모델(DOM / Document Object Model) - 문서에 접근할 수 있는 객체 모델이다 - DOM의 최상위 객체는 html이다 2022. 7. 12. HTML 노드의 종류(웹퍼블리싱/프론트엔드/html/css/javascript/기초) HTML DOM은 노드(Node)라고 불리는 계층적 단위에 정보를 저장하고 있음. HTML DOM은 이러한 노드들을 정의하고, 그들 사이의 관계를 설명해주는 역할을 함. 노드의 종류 노드 설명 문서 노드(document node) HTML 문서 전체를 나타내는 노드 요소 노드(element node) 모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드임. 속성 노드(attribute node) 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드의 관한 정보를 가지고 있음. 하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않음. 텍스트 노드(text node) HTML 문서의 모든 텍스트는 텍스트 노드임. 주석 노드(comment node) HTML 문서의.. 2022. 7. 12. html 문서 만들어보기(웹퍼블리싱/프론트엔드/html/css/javascript/기초) 1. 에디터를 실행하여 새파일을 만든다. - File > New File 새파일을 만들면, 다음과 같이 'Untitiled'라는 이름의 새 탭이 생성됨. 2. 생성된 Untitled 문서를 저장한다. - File > Save (또는 Ctrl + S / Cmd + S) - 저장시 파일 경로는 개인이 편한 곳으로 설정. - 파일명 기재시 확장자 명을 html로 적어줘야 함.(예 : test.html) - 나는 임의로 test라는 폴더를 생성 후 그 폴더 안에 test1.html 파일로 저장을 했음. 3. 에디터를 통해 test1.html 문서를 작성한다. - 참고로 저장한 test1.html 파일을 더블클릭 하여 열어보면 브라우저 창이 뜨는데 아무것도 보이지 않을 것이다. (해당 문서에 아무것도 작성하지.. 2020. 7. 22. 코드 에디터 : Sublime Text3 처음 코딩을 시작할때는 코드를 어디에 적어야 할지 전혀 할지 못한다. 그런데 처음 입문자들이 강의를 들을때는 때에 따라 다르긴 하지만 쉽게 이해를 돕기위해 메모장에 코드를 적어 .html 파일로 저장하는 경우도 있고, 한국같은 경우는 에디트플러스를 쓰는 경우도 많이 봤다. 그런데 개인적으로 나만 그런지는 모르겠는데, 코딩에 입문하면서 수많은 영상 강의나 코드가 적혀있는 화면을 볼때면 뭔가 어두운 화면에 여러 색깔의 텍스트가 현란하게 적혀있는걸 봤었고, 그게 꽤 멋있어 보였던것 같은데, 실제 입문 과정에서는 메모장이나 에디트플러스(에디트플러스는 초기 설정의경우 배경이 흰색)로 접하는 경우가 있다보니 뭔가 밋밋한 느낌같은게 있었다. 뭔가 외국 개발자들이 쓰는 에디터(어두운 배경)가 좋아보이고 멋져보였던것 같.. 2020. 6. 13. HTML과 CSS HTML(Hyper Text Markup Language) Hyper Text => 다른 곳으로 연결할 수 있는 기능을 가진 멋진 텍스트 Markup Language => 마크(표기)된 언어 기본적으로 HTML은 문서라고 생각할 수 있다. 이후 HTML의 태그들을 공부하다 보면 알게되겠지만 의 헤딩태그, 문단태그, 줄바꿈 등 문서를 이루는 기본 형태를 표기할 수 있는 태그들로 구성되어있다. 우리가 흔히 오프라인인 책에서 문서를 구성한다면, 온라인에서는 HTML로 문서를 구성한다고 보면된다. 그런데 굳이 저런 태그들을 쓰는 이유는, 컴퓨터가 이해할 수 있도록 사용하기 위해서이다. 인간은 시각적으로 문서의 구조를 보고 구성이 어떻게 되어있는지, 어디가 제목이고 어디가 본문인지를 쉽게 알아 챌 수 있다. .. 2020. 6. 3. 이전 1 2 3 4 5 6 다음
