다량의 텍스트 준비 아래 링크처럼 lorem ipsum 사이트를 이용하면 의미없는 단어들을 나열해준다. 더미데이터를 만들 때 사용한다. http://guny.kr/stuff/klorem/#/p-view 한글 Lorem Ipsum (간세네) 로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 guny.kr 🔻텍스트 색상, 전경색(Fore Color)🔻 color 보통 검은색은 흰 배경색과 대비가 강하기에 잘 사용하지 않는다. #333333 ~ #555555 의 값을 잘 사용한다. (RGB가 같은 숫자면 회색이다.) p { color: #ff5733; ..
background-color와 background-image는 CSS에서 요소의 배경을 스타일링하는 속성들이다. 🔻1. background-color🔻 요소의 배경 색상을 지정한다. CSS 색상 표현법 1. Color Name : red, yellow, bule 2. RGB Color(16진수) : #FFFFFF 3. RGB Color(10진수) : rgb(255,255,255) 4. RGBA Color(10진수) : rgba(255,255,255,1) a : alpha channel의 약자,(0~1 사이의) 불투명도를 의미한다. 0으로 갈 수록 투명 🔻2. background-image🔻 background 속성과 함께 사용되어 요소의 배경을 스타일링하는 데에 사용되는 속성들 1) background..
🔻Emmet, Zen-coding🔻 CSS 선택자 문법을 사용해서 HTML/CSS 코드를 손쉽게 작성하는 기능 개발도구(Eclipse, VS code 등)들이 Emmet 기능을 지원한다. 생산성 도구 HTML과 CSS 코드를 간결하고 빠르게 작성할 수 있도록 도와주는 확장 툴이다. id,클래스,속성 선택자를 먼저 만들면 HTML 코드를 작성해준다. 1. 클래스 및 ID 속성 추가 .classname 또는 #idname과 같이 클래스와 ID 속성을 빠르게 추가할 수 있다. '$'를 사용하여 id 중복을 방지한다. 아이디는 중복되면 안되니 아래처럼 사용불가하다. div#box1{상자}*5 상자 상자 상자 상자 상자 숫자가 변화되야할 때는 '$'를 사용한다. div#box${상자}*5 상자 상자 상자 상자 상..
https://steady-record.tistory.com/entry/HTML-%ED%91%9C-table%EC%83%9D%EC%84%B1-%EC%83%89%EC%83%81-%EC%A0%95%EB%A0%AC-%ED%81%AC%EA%B8%B0-%EC%85%80%EB%B3%91%ED%95%A9 [HTML] table 태그 (생성, 색상, 정렬, 크기, 셀병합) 표, table 🔻표 생성 순서 이해하기🔻 [2행 2열 상자 만드는 순서] 1. 큰 틀 하나를 만든다. 2. 가로 길이가 전체 길이와 같고 세로길이는 전체 길이의 1/2인 틀 2개를 만든다. 3. 2에서 만든 틀의 가로 steady-record.tistory.com 테이블 구성요소에는 table, tr, th, td로 구성되어 있다고했는데 사실 정확..
style 적용시 선택자 또는 속성이 충돌 날 때가 있다. 🔻1. 선택자 충돌🔻 같은 선택자를 중복하여 스타일을 적용할 때 충돌이 난다. 위에서 아래로 스타일을 적용하므로 적용하는 속성이 다르면 그대로 스타일 적용이 된다. > 큰 문제가 되지않는다. 상자 🔻2. 속성 충돌🔻 동일한 태그를 선택한 식별자들이 동일한 속성을 지정한다면 충돌이 발생한다. 작성된 순서에 따라 마지막에 작성한 속성이 적용된다. 상자 🔻3. 선택자 우선순위🔻 속성 충돌이 발생하면 코딩 순서에 상관없이 선택자 간의 우선 순서에 따라 속성이 적용된다. 점수로 계산되어 높은 점수의 선택자가 적용된다. 🔻선택자 점수 계산🔻 정밀도가 높을수록 점수가 높다.(동급일때만) 하위 선택자 점수가 높아도 상위 선택자를 넘어설 수 없다. 태그 선택자 ..
CSS 문법 선택자 { 속성명 : 값; } 🔻CSS 선택자, Selector🔻 HTML 문서에서 특정 요소를 선택하여 스타일을 적용하는 방법을 지정한다. 1. 전체 선택자 '*' 기호로 모든 태그를 선택한다. * {} 2. 태그 선택자 HTML 요소의 이름을 사용하여 해당 요소를 선택한다. 예를 들어, p는 모든 요소를 선택한다. 장점 사용이 쉽다. 같은 태그를 일괄 적용한다. 생산성 및 유지보수성이 향상된다. 단점 : 같은 태그를 일괄 적용하기에 내가 원하는 영역을 정하는 것이 복잡하다. tag {} 3. ID 선택자 태그에 명시된 ID 속성을 검색해서 태그를 선택한다. id 생성 시, 영어+숫자 조합, 숫자로 시작 불가 원하는 태그를 직접 선택할 수 있다. id는 한 페이지 내에서 유일한 값이어야 한..
🔻HTML5의 새로운 기능②🔻 HTML5로 버전업하면서 기존에는 코드로 구현하던 기능들이 속성이나 옵션으로 생겨 간단하게 구현 가능해졌다. 1. progress (진행율) 진행 중인 작업의 진행 상태를 시각적으로 나타낸다. value: 0부터 1까지의 값으로, 백분율을 나타낸다. 최대값 설정을 통해 진행의 범위를 조절할 수 있다. 진행 상태를 나타내므로 최소값 설정은 필요하지 않다. 디자인 커스터마이징이 어려우며, 일반적으로 외부 라이브러리의 품질이 더 높다. 2. meter 숫자를 막대 그래프 형태로 나타낸다. 속성 min : 최소값을 설정할 수 있다. high : 미터의 값이 특정 상한값을 넘었을 때 시각적으로 강조한다. low : 미터의 값이 특정 하한값 이하일 때 시각적으로 강조한다. value ..
🔻HTML5의 새로운 기능①🔻 HTML5로 버전업하면서 기존에는 코드로 구현하던 기능들이 속성이나 옵션으로 생겨 간단하게 구현 가능해졌다. 1. placeholder (플레이스홀더) 안내메시지 사용자에게 입력 예시나 설명을 제공한다. 예를 들어, 입력 필드에 "이름을 입력해주세요"라는 안내메시지가 있다면 사용자는 그 곳에 자신의 이름을 입력하게 된다. 이름 : 비밀번호 : 2. required 필수로 입력을 받아야 하는 필드에 사용되는 속성이다. 이 속성이 설정된 경우, 사용자는 해당 필드에 값을 반드시 입력해야 한다. 값이 입력하지 않고 버튼을 눌렀을 경우, 에러메시지를 표시한다. 아이콘 및 에러메시지 수정이 복잡하다. 로그인(필수입력) 아이디: 암호: 3. email, url 요소의 type 값으로 ..
🔻HTML 문서에 CSS를 적용하는 방법🔻 1. 인라인 스타일 시트, Inline Style Sheet 태그안에 스타일 적용 장점 : 가독성이 높다. 단점 : 재사용이 불가능하다. Vs Code 설치하기 2. 내부 스타일 시트, Embeded Style Sheet 태그내에 서식을 명시한다. 문서 내의 여러태그의 서식을 일괄 적용할 수 있다. 장점 : 재사용이 가능하다. 단점 : 가독성이 낮다. See the Pen Untitled by 허수경 | 정보융합전공 | 한양대(서울) (@nscilehk-the-scripter) on CodePen. ❗3. 외부 스타일 시트, External Style Sheet❗ *.css 파일에 서식을 명시한다. 여러 HTML 파일에 스타일 적용이 가능하다. 장점 : 재사용..
🔻CSS, Cascading Style Sheets🔻 스타일 시트로 디자인을 담당한다. HTML 페이지의 서식을 만드는 언어이다. 독립 실행이 안되어 반드시 HTML 문서와 같이 사용해야 한다. HTML 서식 기능에서 확장되어 CSS 서식 기능이 만들어졌다. 🔻CSS 주요 역할🔻 1. 스타일링(웹디자인) HTML 요소(태그)들에게 스타일을 적용한다. 2. 페이지 레이아웃 요소들의 배치와 크기를 조절한다. 3. 반응형 웹 디바이스 크기에 맞춰 적절한 레이아웃과 스타일을 제공한다. 4. 웹 접근성 향상 시각 장애인을 위한 스크린리더 작업을 제공한다. 🔻CSS 중요성🔻 1. 시각적 표현 훨씬 더 완성도 높은 화면을 구현 할 수 있다. 2. 생산성 및 유지보수 용이성 향상 HTML와 서식을 분리시켜 작업함으로써..
