키다리 개발자

padding과 margin은 간격 사이의 영역을 정의하는데 기준점이 다릅니다. 예를 들어, 우리가 레스토랑에 가서 음식 2개를 시켜서 테이블에 놓았다고 합니다. padding은 접시의 테두리(border)에서 음식(content)까지의 사이의 영역이며, margin은 접시(element)와 접시(element) 사이의 영역으로 이해하시면 됩니다. padding padding 속성은 내용(content)과 테두리(border) 사이의 간격인 패딩 영역의 크기를 설정합니다. 이러한 패딩 영역은 background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다. CSS를 사용하면 패딩 영역의 크기를 방향별로 따로 설정할 수 있습니다. padding 속성 padding-top padding-rig..

CSS 선택자 CSS의 선택자는 다음과 같이 4개로 분류됩니다. HTML 요소 선택자 id 선택자 class 선택자 그룹(group) 선택자 HTML 요소 선택자 CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있습니다. 예를 들어, 을 모두 css 스타일로 적용하려고 합니다. html 선택자(여기선 span 해당)를 css문서에 직접 입력하면, 해당 모든 요소의 텍스트 색은 green(초록색)으로 스타일 적용이 됩니다. id 선택자 id 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용합니다. 이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 줍니다. 그러므로 하나의 웹페이지에서는 중복하지 않고 딱 1개의 요소만 특정 id..

CSS란? CSS는 Cascading Style Sheets의 약자입니다. CSS는 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어입니다. HTML4 부터는 이러한 모든 서식 설정을 HTML 문서로부터 따로 분리하는 것이 가능해졌습니다. 오늘날 대부분의 웹 브라우저들은 모두 CSS를 지원하고 있습니다. CSS를 사용하는 이유 HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 일일이 따로 지정해 주어야만 합니다. 이 작업은 매우 많은 시간이 걸리며, 완성한 후에도 스타일의 변경 및 유지 보수가 매우 힘들어집니다. 이러한 문제점을 해소하기 위해 W3C(World Wide Web Consortium)에서 만든 스타일 시트 언어가 바로 CSS입니다...

: HTML Link 요소는 현재 문서와 외부 리소스와의 연결 관계를 명시합니다. 이 요소는 스타일 시트에 링크하는 데에 가장 많이 사용됩니다. rel="속성 값" : 요소에 반드시 명시되어야 하는 필수 속성입니다. 이 속성의 가장 일반적인 쓰임새는 스타일시트의 링크를 나타내는것입니다. "stylesheet" : 스타일 시트(stylesheet)로 사용할 외부 리소스를 불러옵니다. type : 태그의 type 속성은 링크된 외부 리소스의 미디어 타입을 명시합니다. 이 속성은 반드시 href 속성이 설정되어 있어야만 사용할 수 있습니다. href="URL" : 링크된 외부 리소스(external resource)의 URL를 명시합니다.

태그의 구성에 대해 기록하겠습니다. ... 아래 사진은 html문서를 서로 연결시켜 이동하는 모습입니다. : 다른 페이지, 파일, 같은 페이지의 어느 위치, 이메일 주소나 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만든다. href="html 문서의 주소값" : html 문서로 이동시키는 속성이다. 한 줄 결론 따라서, 와 href속성은 이동시킬 HTML의 문서를 연결하고 이동시킨다. 이미지 태그는 단일 태그이다. HTML문서에 이미지를 삽입한 모습입니다. : HTML문서에 이미지를 삽입할 수 있으며 단일(홀) 태그이다. 따라서 본인 스스로 열고 닫는다. src="이미지 주소 값" : src 속성은 source의 약어이며, 이미지의 경로를 받는다. 한 줄 결론 와 src속성은 이동경로를 ..

실제 간단한 웹페이지를 만들어 HTML 기본 태그를 기록하였습니다. 실습한 웹페이지를 크롬(Chrome) 검사도구에서 텍스트상으로 설명하기 애매한 요소를 직접 확인하려고 열어보았습니다. 'F12' 또는 '오른쪽 클릭 후 검사'로 검사도구를 열어줍니다. 우측의 빨간 테두리 부분 안에서 태그 위로 마우스 커서를 이리저리 움직여 보면, 요소(Elements)들의 섹션(Section)을 좌측 화면(실제 화면)에서 직접 확인할 수 있습니다. 는 태그를 감싸준다(Wrap) HTML 코드 작성 후 크롬 검사도구 elements에서 위에 커서를 올려보면 구역이 지정이 되고, 웹 페이지 상 가 요소를 감싸고 있는 걸 확인할 수 있습니다. 즉, 는 태그들을 감싸는 역할을 합니다. 와 두 태그 모두 Text를 입력받는다 :..

HTML 요소(Element)의 구조 여는 태그(Opening tag): 이것은 요소의 이름과(이 경우 h1), 열고 닫는 꺽쇠 괄호로 구성됩니다. 요소가 시작(이 경우 단락의 시작 부분)부터 효과가 적용되기 시작합니다. 닫는 태그(Closing tag): 이것은 요소의 끝(이 경우 단락의 끝 부분)에 위치합니다. 닫는 태그를 적어주지 않으면 오류가 발생합니다. 내용(Content): 요소의 내용이며, 이 경우 단순한 텍스트이다. 요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(element)라고한다.

HTML의 기본 구조는 아래와 같다. (본문에서는 HTML 기본 구조의 요소들만 기록하겠습니다.) 문서의 첫 줄에 선언을 하면, 작성하는 문서가 HTML5 임을 명시하는 것이다. ... HTML 문서의 처음과 끝을 나타낸다. 사람의 뇌의 해당하는 부분이다. (보이지 않는 부분을 담당) 문서의 문자셋(character set)을 지정하는 정보와 문서의 제목(title)을 나타낸다. ... 사람의 몸통(본문)에 해당한다. (보이는 부분을 담당) body 안에 필요한 요소들을 담아 html문서로 나타낼 수 있다. 한 줄 결론 HTML의 기본 문서구조에 대해 와 의 차이점은 사용자가 이용할 수 있는 View의 유/무로 역할이 다르다. : 사람의 뇌 기능 (보이지 않는 기능적 역할) : 사람의 몸통 역할 (보여지..