📌 태그는 수평선을 긋는 용도로 많이 쓰인다.물론 CSS의 border 속성으로 선을 표현할 수도 있지만, hr은 단락을 구분하거나 시각적으로 잠시 쉬어가는 포인트를 줄 때 유용하다.그런데 한 가지 의문이 생긴다.시각적으로는 분명 ‘line(선)’인데, 왜 태그 이름은 rule일까? 인쇄소의 ‘Rule’이 단어는 사실 인쇄와 타이포그래피의 역사에서 비롯되었다.컴퓨터가 등장하기 훨씬 전, 금속 활자로 책을 찍던 시절 인쇄공들은 단락과 단락을 구분하기 위해 얇은 금속 막대를 활자 사이에 끼워 넣었다. 이 막대를 전문 용어로 “Rule” 혹은 Ruling line이라 불렀다.즉, 여기서의 rule은 우리가 흔히 아는 규칙(rule)이 아니라, '구분을 위해 사용하는 선'이라는 인쇄 용어였다. HTML로의 ..
🎯 아주 간단히 웹사이트 분위기를 한눈에 업그레이드! 500원으로 실무용 버튼 템플릿을?작고 강한 디자인 하나,프로젝트의 분위기를 바꿉니다. 템플릿을 뜯어보며 공부하는 것도,적절히 수정해 바로 쓰는 것도모두 괜찮은 방법입니다. AI가 어쩌고저쩌고,효율성이 어쩌고저쩌고.흐름을 거스를 수는 없지만—AI에 의존할수록,‘실력 있는 사람’의 가치는오히려 더 빛나게 될 겁니다. 배움의 과정이다시 중요해지는 날이,곧 올 테니까요. ✅ 구성Available (사용 가능): 마우스 오버 시 부드럽게 컬러 체인지! 시선을 사로잡는 액티브한 효과!Pressed (누른 상태): 실제 버튼을 누르는 듯한 입체감! 사용자의 클릭 액션을 확실하게 인지!Disabled (사용 불가능): 직관적인 디자인으로 사용 불가를 명확하게!..
개요웹 퍼블리싱이 처음이신가요? 이 글을 통해 웹 퍼블리싱이란 무엇인지, 그리고 실무에서 어떤 기술과 업무가 필요한지 차근히 알려드립니다. 웹 퍼블리싱은 단순히 웹 디자인을 코딩으로 구현하는 것 이상으로 온라인 생태계에서 중요한 역할을 합니다. 아래에 목차에 따라 순서대로 짚어 나가면 웹 퍼블리싱에 대해 차근히 이해할 수있을 거라기대합니다.0. 목차 안내웹 퍼블리싱 의미온라인 생태계의 이해웹 퍼블리싱 역할필요한 기술웹 퍼블리셔의 주요 업무웹 퍼블리싱의 목적1. 웹 퍼블리싱 의미: 기본 개념 익히기 웹 퍼블리싱(Web Publishing)이란 정적인 디자인 이미지를 코딩 작업을 통해 실제 웹 사이트 디자인으로 구체화하는 과정을 의미한다. 2. 온라인 생태계의 이해: 웹 퍼블리싱과의 연관성웹 퍼블리싱의 역할..
개요세로 메뉴 만들기 내용을 최대한 자세히 담았습니다. 세로 메뉴 만들기는 매우 간단하고 쉬워 보이지만 block과 inline에 대한 이해 없이 제대로 만들기 어렵습니다. 오프라인 강의에서 실습 문제로 세로 메뉴 만들기를 진행하면, 생각처럼 잘 되지 않아 의외로 많이 당황하는 실습 문제이기도 합니다. 이 글을 통해 세로 메뉴를 만들 때 필요한 요소와 각 요소의 역할을 명확히 이해하면 헷갈림 없이 쉽게 만들 수 있습니다.0. 목차 안내세로 메뉴 HTML 구조 이해하기각 요소의 역할 이해하기각 요소의 역할에 맞게 style 지정하기1. 세로 메뉴 HTML 구조 이해하기 웹사이트에서 2개 이상의 링크 버튼을 한 곳에 모아 나열해 놓은 형태를 "메뉴"라고 칭한다. 그렇게 모아 놓은 링크 버튼은 "메뉴..
개요는 왜 닫는 태그가 없을까요?, , , , , 이런 요소들은 모두 짝으로 이루어져 있습니다. 짝으로 이루어진 요소와 처럼 그렇지 않은 요소의 차이점이 무엇인지 살펴봅니다. 0. 목차 안내짝을 이루는 요소 관찰해 보기이미지 요소 관찰해 보기짝을 이루는 요소와 그렇지 않은 요소1. 짝을 이루는 요소 관찰해 보기 1.1. , , , , , 이 요소들 모두 텍스트를 담는다고 생각해 보자!문서 내에서 가장 큰 제목을 의미합니다.일반적인 글을 의미합니다. 순서가 없는 목록을 의미합니다. 순서가 있는 목록을 의미합니다.링크를 의미합니다.특정 기능이 있는 버튼을 의미합니다. 위 코드를 실행하면 웹 브라우저에서는 각 텍스트들이 구분되어 보일 것이다. 1.2. 위에서 언급한 6가지 요소 없이 그냥 6개의..
-
HTML 기본 구조 심화 학습
개요HTML 파일 만들고 기본 구조 작성하는 과정까지의 내용을 최대한 자세히 담았습니다. HTML 문서 작성을 처음 시도한다면 이 글이 분명히 도움 될 것이라 자부합니다. 이 내용은 2016년부터 누적된 오프라인 강의를 통해 정리된 내용입니다. 그리고 그 오프라인 강의 중 어김없이 항상 만족도가 가장 높았던 강의 내용입니다. 어떤 부분이 만족스러웠는지 수강생들과 대화를 나누어보면 돌아오는 답은 거의 비슷했습니다. 그 내용을 한마디로 표현하자면 '알고 있다고 생각했었는데 사실은 알고 있는 게 아니었다.'였습니다. 전문 지식을 다루는 만큼 용어 정리부터 시작합니다. 용어 정리만 잘 되어도 버거웠던 마음이 조금이나마 가벼워지고 자신감이 생깁니다. 전문 지식인만큼 결코 쉬운 내용은 아닙니다. 하지만 자신감을..
-
웹 퍼블리싱이란?
개요웹 퍼블리싱이 처음이신가요? 이 글을 통해 웹 퍼블리싱이란 무엇인지, 그리고 실무에서 어떤 기술과 업무가 필요한지 차근히 알려드립니다. 웹 퍼블리싱은 단순히 웹 디자인을 코딩으로 구현하는 것 이상으로 온라인 생태계에서 중요한 역할을 합니다. 아래에 목차에 따라 순서대로 짚어 나가면 웹 퍼블리싱에 대해 차근히 이해할 수있을 거라기대합니다.0. 목차 안내웹 퍼블리싱 의미온라인 생태계의 이해웹 퍼블리싱 역할필요한 기술웹 퍼블리셔의 주요 업무웹 퍼블리싱의 목적1. 웹 퍼블리싱 의미: 기본 개념 익히기 웹 퍼블리싱(Web Publishing)이란 정적인 디자인 이미지를 코딩 작업을 통해 실제 웹 사이트 디자인으로 구체화하는 과정을 의미한다. 2. 온라인 생태계의 이해: 웹 퍼블리싱과의 연관성웹 퍼블리싱의 역할..
-
세로 메뉴 만들기
개요세로 메뉴 만들기 내용을 최대한 자세히 담았습니다. 세로 메뉴 만들기는 매우 간단하고 쉬워 보이지만 block과 inline에 대한 이해 없이 제대로 만들기 어렵습니다. 오프라인 강의에서 실습 문제로 세로 메뉴 만들기를 진행하면, 생각처럼 잘 되지 않아 의외로 많이 당황하는 실습 문제이기도 합니다. 이 글을 통해 세로 메뉴를 만들 때 필요한 요소와 각 요소의 역할을 명확히 이해하면 헷갈림 없이 쉽게 만들 수 있습니다.0. 목차 안내세로 메뉴 HTML 구조 이해하기각 요소의 역할 이해하기각 요소의 역할에 맞게 style 지정하기1. 세로 메뉴 HTML 구조 이해하기 웹사이트에서 2개 이상의 링크 버튼을 한 곳에 모아 나열해 놓은 형태를 "메뉴"라고 칭한다. 그렇게 모아 놓은 링크 버튼은 "메뉴..
-
HTML CSS 3가지 버튼 디자인 템플릿
🎯 아주 간단히 웹사이트 분위기를 한눈에 업그레이드! 500원으로 실무용 버튼 템플릿을?작고 강한 디자인 하나,프로젝트의 분위기를 바꿉니다. 템플릿을 뜯어보며 공부하는 것도,적절히 수정해 바로 쓰는 것도모두 괜찮은 방법입니다. AI가 어쩌고저쩌고,효율성이 어쩌고저쩌고.흐름을 거스를 수는 없지만—AI에 의존할수록,‘실력 있는 사람’의 가치는오히려 더 빛나게 될 겁니다. 배움의 과정이다시 중요해지는 날이,곧 올 테니까요. ✅ 구성Available (사용 가능): 마우스 오버 시 부드럽게 컬러 체인지! 시선을 사로잡는 액티브한 효과!Pressed (누른 상태): 실제 버튼을 누르는 듯한 입체감! 사용자의 클릭 액션을 확실하게 인지!Disabled (사용 불가능): 직관적인 디자인으로 사용 불가를 명확하게!..
리스트 : 콘텐츠가 있으면 최근 5건을 불러옵니다.
-
HTML 수평선, hr Horizontal RuleHTML 2025.09.06 13:57
📌 태그는 수평선을 긋는 용도로 많이 쓰인다.물론 CSS의 border 속성으로 선을 표현할 수도 있지만, hr은 단락을 구분하거나 시각적으로 잠시 쉬어가는 포인트를 줄 때 유용하다.그런데 한 가지 의문이 생긴다.시각적으로는 분명 ‘line(선)’인데, 왜 태그 이름은 rule일까? 인쇄소의 ‘Rule’이 단어는 사실 인쇄와 타이포그래피의 역사에서 비롯되었다.컴퓨터가 등장하기 훨씬 전, 금속 활자로 책을 찍던 시절 인쇄공들은 단락과 단락을 구분하기 위해 얇은 금속 막대를 활자 사이에 끼워 넣었다. 이 막대를 전문 용어로 “Rule” 혹은 Ruling line이라 불렀다.즉, 여기서의 rule은 우리가 흔히 아는 규칙(rule)이 아니라, '구분을 위해 사용하는 선'이라는 인쇄 용어였다. HTML로의 ..
-
HTML CSS 3가지 버튼 디자인 템플릿HTML Templates 2025.05.13 11:47
🎯 아주 간단히 웹사이트 분위기를 한눈에 업그레이드! 500원으로 실무용 버튼 템플릿을?작고 강한 디자인 하나,프로젝트의 분위기를 바꿉니다. 템플릿을 뜯어보며 공부하는 것도,적절히 수정해 바로 쓰는 것도모두 괜찮은 방법입니다. AI가 어쩌고저쩌고,효율성이 어쩌고저쩌고.흐름을 거스를 수는 없지만—AI에 의존할수록,‘실력 있는 사람’의 가치는오히려 더 빛나게 될 겁니다. 배움의 과정이다시 중요해지는 날이,곧 올 테니까요. ✅ 구성Available (사용 가능): 마우스 오버 시 부드럽게 컬러 체인지! 시선을 사로잡는 액티브한 효과!Pressed (누른 상태): 실제 버튼을 누르는 듯한 입체감! 사용자의 클릭 액션을 확실하게 인지!Disabled (사용 불가능): 직관적인 디자인으로 사용 불가를 명확하게!..
-
웹 퍼블리싱이란?HTML 2024.12.15 23:53
개요웹 퍼블리싱이 처음이신가요? 이 글을 통해 웹 퍼블리싱이란 무엇인지, 그리고 실무에서 어떤 기술과 업무가 필요한지 차근히 알려드립니다. 웹 퍼블리싱은 단순히 웹 디자인을 코딩으로 구현하는 것 이상으로 온라인 생태계에서 중요한 역할을 합니다. 아래에 목차에 따라 순서대로 짚어 나가면 웹 퍼블리싱에 대해 차근히 이해할 수있을 거라기대합니다.0. 목차 안내웹 퍼블리싱 의미온라인 생태계의 이해웹 퍼블리싱 역할필요한 기술웹 퍼블리셔의 주요 업무웹 퍼블리싱의 목적1. 웹 퍼블리싱 의미: 기본 개념 익히기 웹 퍼블리싱(Web Publishing)이란 정적인 디자인 이미지를 코딩 작업을 통해 실제 웹 사이트 디자인으로 구체화하는 과정을 의미한다. 2. 온라인 생태계의 이해: 웹 퍼블리싱과의 연관성웹 퍼블리싱의 역할..
-
세로 메뉴 만들기Layout 2024.05.27 15:30
개요세로 메뉴 만들기 내용을 최대한 자세히 담았습니다. 세로 메뉴 만들기는 매우 간단하고 쉬워 보이지만 block과 inline에 대한 이해 없이 제대로 만들기 어렵습니다. 오프라인 강의에서 실습 문제로 세로 메뉴 만들기를 진행하면, 생각처럼 잘 되지 않아 의외로 많이 당황하는 실습 문제이기도 합니다. 이 글을 통해 세로 메뉴를 만들 때 필요한 요소와 각 요소의 역할을 명확히 이해하면 헷갈림 없이 쉽게 만들 수 있습니다.0. 목차 안내세로 메뉴 HTML 구조 이해하기각 요소의 역할 이해하기각 요소의 역할에 맞게 style 지정하기1. 세로 메뉴 HTML 구조 이해하기 웹사이트에서 2개 이상의 링크 버튼을 한 곳에 모아 나열해 놓은 형태를 "메뉴"라고 칭한다. 그렇게 모아 놓은 링크 버튼은 "메뉴..
-
는 왜 닫는 태그가 없을까?
HTML 2024.03.15 18:34개요는 왜 닫는 태그가 없을까요?, , , , , 이런 요소들은 모두 짝으로 이루어져 있습니다. 짝으로 이루어진 요소와 처럼 그렇지 않은 요소의 차이점이 무엇인지 살펴봅니다. 0. 목차 안내짝을 이루는 요소 관찰해 보기이미지 요소 관찰해 보기짝을 이루는 요소와 그렇지 않은 요소1. 짝을 이루는 요소 관찰해 보기 1.1. , , , , , 이 요소들 모두 텍스트를 담는다고 생각해 보자!문서 내에서 가장 큰 제목을 의미합니다.일반적인 글을 의미합니다. 순서가 없는 목록을 의미합니다. 순서가 있는 목록을 의미합니다.링크를 의미합니다.특정 기능이 있는 버튼을 의미합니다. 위 코드를 실행하면 웹 브라우저에서는 각 텍스트들이 구분되어 보일 것이다. 1.2. 위에서 언급한 6가지 요소 없이 그냥 6개의..