div vs span vs p 차이점은 div와 p는 블록요소 이고, span은 인라인 요소입니다. 또한 p는 문자 단락 용도이고, div는 레이아웃 계층 나누기 용도입니다. div vs span vs p 블록과 인라인 차이 <div>, <p> 태그와 <span> 태그 사이의 차이점은 블록 요소와 인라인 요소에 있습니다. <div>div 태그</div> <p>p 태그</p> <span>span 태그</span> 결과 블록 요소는 아래 그림의 <div>, … READ MORE
HTML 대문자 변경은 uppercase, 소문자 변경은 lowercase 속성값을 사용하며 기본 설정은 none으로 초기화합니다. HTML 대문자 변경 방법 text-transform : uppercase 속성 및 속성값을 사용하면, HTML 문서의 텍스트를 대문자로 변경할 수 있습니다. <!DOCTYPE html> <html> <head> <style> p { text-transform : uppercase; } </style> </head> <body> <p>hello, my name is babo. do you have any idea … READ MORE
HTML 글자 굵게 만들기 HTML 글자 굵게 만드는 방법은 크게 세 가지가 있습니다. <b>, <strong> 그리고 font-weight 속성입니다. <b> 태그 <b> 태그는 사람눈에만 단순히 글자가 굵게 표시되도록 합니다. 검색 엔진 등에는 의미론적으로 중요도를 표시할 필요가 없을 경우 사용합니다. <p>이 사과는 <b>빨강색</b>입니다.</p> 결과 TRY IT ▷ <strong> 태그 <strong> 태그는 사람눈과 검색엔진 둘다에 해당 섹터의 요소가 … READ MORE
HTML 내부링크 HTML 내부링크 조작 방법은 HTML의 id 속성을 사용하면 됩니다. id 속성은 HTML의 태그에 고유 이름을 붙이는 기능입니다. <h2 id = “apple”>사과</h2> <h2 id = “banana”>바나나</h2> <h2 id = “orange”>오렌지</h2> 이렇게 원하는 태그 안에 id = “id명”을 입력하고, <a> 태그의 href 주소에 각 아이디명을 입력하면 내부링크가 완성됩니다. <a href=”#apple”>사과로 이동!!!</a> <a href=”#banana”>바나나로 이동!!!</a> <a … READ MORE
HTML body background color HTML body background color 속성 변경은 크게 두 가지 방법으로 변경할 수 있습니다. 인라인 속성으로 태그에 직접 추가를 하거나 CSS로 body에 선택자를 지정합니다. <body> 배경색 CSS 선택자 지정 <body>를 선택자로 지정한 후 background-color 속성에 원하는 색을 입력하면 됩니다. body { background-color: orange; } 결과 TRY IT ▷ <body> 태그에 인라인 스타일 … READ MORE
HTML body center 정렬은 margin : 0 auto 속성이 보편적입니다. text-align 방식은 하위에 width 속성을 삽입하면 정렬이 작동하지 않는 경우가 발생하기 때문입니다. HTML body center HTML body center 정렬을 하는 방법은 margin:0 auto 속성을 사용합니다. body { margin: 0 auto; width: 300px; } 결과 TRY IT ▷ text-align:center 속성을 사용할 경우 width 등의 길이 조절을 … READ MORE
HTML body margin 속성은 0으로 값을 지정하면 값이 초기화됩니다. 아무 셋팅을 하지 않은 빈 페이지도 기본 마진이 설정되어 있기 때문입니다. HTML body margin 속성 초기 셋팅 HTML body margin 속성은 페이지의 값을 초기화할 때 사용할 수 있습니다. 아래에는 아무런 margin 속성이 없는 HTML 페이지입니다. <!DOCTYPE html> <html> <head> <style> body { border: 1px solid black; … READ MORE
HTML body 가운데 정렬 HTML body 가운데 정렬 하는 방법은 margin: 0 auto 속성을 CSS로 추가하면 됩니다. body { margin: 0 auto; width: 300px; } 결과 TRY IT ▷ 영역 구분을 시키기 위해서 예제에서는 테두리를 삽입했습니다.
HTML title 이미지 또는 icon HTML title 이미지 삽입 방법은 <link> 태그에 이미지 주소를 링크시키면 됩니다. <link href=”이미지주소.ico” rel=”shortcut icon” type=”image/x-icon”> 예를 들어 사과 모양 로고의 주소를 브라우저 파비콘으로 삽입하고 싶다면 아래와 같이 작성합니다. <!DOCTYPE html> <html> <head> <link rel=”shortcut icon” type=”image/x-icon” href=”https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/800px-Apple_logo_black.svg.png”> </head> <body> </body> </html> 결과 TRY IT ▷ 이렇게 브라우저 탭의 <title> … READ MORE
HTML title 속성은 툴팁 기능을 구현합니다. 반면 title 태그는 웹페이지의 제목을 브라우저 상단에 표시하는 기능을 합니다. title 요소는 태그와 속성으로 사용될 때 삽입 위치와 기능이 전혀 달라집니다. HTML title 속성 HTML title 속성은 태그에 보조 정보를 부가하는 기능입니다. 태그 요소에 마우스를 올리면, title 속성에 적힌 문자 정보가 태그 위에 표시됩니다. 이런 방식을 툴팁이라고 부릅니다. <!DOCTYPE … READ MORE