안녕하세요! 저번 포스팅에서는 텍스트 포매팅 요소들에 대해 알아보았는데요. 이번에는 웹사이트에서 많이 볼 수 있는 링크에 대해 포스트 해보려고 합니다. 다음 이미지는 네이버 웹페이지의 일부인데요. 마우스를 움직여 뉴스 제목이나 신문사 로고를 클릭하면 다른 페이지로 이동하는 것은 다들 알고 계실텐데요. 이러한 기능은 요소인 앵커 요소를 사용해서 구현할 수 있습니다. 우선 요소의 사용법을 알아보면 다음과 같습니다. 디스플레이에 보여질 글자 요소에서 가장 중요한 href 속성은 Hypertext REFerence의 약자인데요. 클릭하면 해당 속성의 값인 "url"로 이동하는 것을 알려줍니다. 다음으로 중요한 속성는 target 속성으로 어느 창에서 해당 페이지를 보여줄지 결정하며 아래와 같은 값을 가질 수 있..

저번 포스팅에서는 ~ 요소와 요소에 대해 알아보았는데요. 이번에는 텍스트에 특별한 기능을 더해주는 요소들에 대해 간단하게 포스트 해보려고 합니다! HTML Formatting 요소에는 다음과 같은 종류들이 존재합니다. 요소 효과 및 의미 굵은 글씨체로 적용 굴은 글씨체로 적용 (높은 중요도 요소) 기울임꼴로 표시 (주로 외국어) 기울임꼴로 표시 (강조할 때) 형광펜을 칠한 효과 취소 요소 아래 첨자 요소 윗 첨자 요소 CSS를 배우고 나면 이러한 요소를 사용하지 않고도 해당 효과들을 추가할 수 있으므로 굵은 글씨체를 표시하려고 요소를 사용해야겠다! 이렇다기 보다는 이 텍스트는 중요하니까 요소를 사용해서 표시해야겠다는 사고가 좀 더 적절해 보입니다! 아래는 Text formatting 요소를 사용한 코드입..

1. Heading(제목) HTML ~ 요소는 6단계의 섹션 제목을 나타냅니다. 이때 요소가 가장 단계가 높아 중요도가 높으며 반대로 가 가장 덜 중요한 제목을 나타냅니다. 2. Paragraph(단락) 단락요소 요소는 하나의 문단을 나타내고 항상 새줄로 시작합니다. 참고로 요소의 내용에 한 칸 이상의 스페이스가 존재한다면 한 칸의 스페이스로 바꿔서 출력됩니다... (이런 동작이 싫으면 요소를 사용하세요!) 이때 요소를 이용해 줄바꿈을 하거나 entity code 중 를 사용하여 빈칸을 넣을 수 있습니다. 이것은 1번 문단입니다. 이것은 2번 문단입니다. 이것은 3번 문단입니다. 이미지 참고) https://developer.mozilla.org/ko/docs/Web/HTML/Element/Heading..

저번에는 HTML Element & Tag를 공부했는데 이번에는 속성(Attributes)에 대해서 포스트 해보려고 합니다. 요소는 속성을 가질 수 있으며 다음과 같이 시작 태그 안에 속성명="값"의 형식으로 사용합니다. 속성은 실제 디스플레이에 표시되지는 않으나 요소에 추가적인 정보를 제공해 줍니다. 예시1) 요소는 URL을 참고하는데 이때 href 라는 속성을 사용하여 클릭하면 해당 페이지로 이동하게 합니다. 예시2) 이미지 요소에는 width와 height라는 속성이 있으며 해당 속성은 이미지의 너비와 높이를 바꾸는 역할을 합니다. 참고로 요소안에 여러가지 속성을 추가할때 "속성-값"들 사이에 쉼표(,)를 작성하지 않습니다 즉 와 같이 ,를 넣는것이 아닌 와 같이 작성해야 합니다. 이미지 참고) h..

HTML은 글과 이미지를 표시하기 위한 마크업 언어로 다양한 요소(Element)를 사용하여 구성합니다. 요소(element)는 시작태그(Opening tag), 내용(Content), 종료태그(closing tag)로 구성됩니다. 좀더 이해하기 쉽게 앞에서 살펴본 코드를 보면 다음과 같습니다. My First Heading My first paragraph. 해당 코드에서는 , , , , , 와 같은 요소들이 사용되었으며 요소를 보면 Page Title 와 같은 구조로 되어 있습니다. 이때 ""을 시작태그, "Page Title"을 내용, ""을 종료태그라고 부릅니다. 참고로 경우에 따라서 내용이나 종료태그가 없는 요소들도 존재하며 HTML은 대소문자를 구분하지 않으나 가급적 소문자로 쓸 것을 권장하며..

HTML은 HyperText Markup Language의 줄임말로 표준화된 마크업 언어를 의미하며 구글과 네이버와 같은 웹 페이지의 기본 내용 및 구조를 생성하는 언어입니다. 주로 HTML은 CSS와 JavaScript와 함께 사용되지만 HTML만을 사용해서 웹 페이지를 구성할 수 있습니다. 다만 가독성과 화려한 디자인은 기대하기는 힘들겁니다... 간단하게 HTML/CSS/JAVASCRIPT를 예시로 설명하면 춤을 추고 있는 알록달록한 조그만 인형을 떠올리면 되는데요!! 인형을 HTML, 알록달록하고 조그만의 스타일을 CSS, 춤을 추고 있는 동작을 JavaScript가 담당하고 있다고 생각하면 됩니다. 앞으로 웹페이지를 만들기 위해 HTML을 사용하여 작성하면 해당 코드를 크롬과 사파리와 같은 웹브라..

웹서비스는 크게 3개의 세대로 분류가 가능합니다. 우선 웹서비스가 처음 시작된 1세대에서는 웹사이트의 형태를 나타내는 HTML(HyperText Markup Language)과 HTTP 프로토콜을 이용하여 이러한 내용을 전송하는 형태로 생각할 수 있습니다. 주로 정적인(Static) 사이트에서 저장된 파일을 받아 클라이언트가 전송받은 파일을 파싱(Parsing)하여 결과를 표시(Rendering)합니다. - 정적(Static) - HTML + CSS - 동기방식, 상호작용이 적음 WEB 2.0에서는 기존 HTML/CSS를 사용한 페이지에 자바스크립트(JavaScript)의 기능을 더하게 되었습니다. 이로인해 서버와 데이터를 주고 받는 User Interaction이 가능해졌으며 이로인해 동적(Dynami..

width : 박스의 너비 height : 박스의 높이 border : 요소를 감싸는 박스 모델의 테두리 - border-color : 박스 모델의 색상 - border-width : 박스 모델의 두께 - border-style : 박스 모델의 모양(스타일) [dashed, solid] * 속기로 border : 4px solid black 을 사용할 수 있음 - border-radius : 곡률설정 (px, %로 설정가능) padding : 콘텐츠 박스와 요소를 둘러싼 테두리 사이에 남은 공간 - padding : 10px -> all four sides - padding : 5px 10px -> vertical, horizontal - padding : 1px 2px 2px -> top, horizo..