Whatever can happen will happen Whatever can happen will happen

🌐 FrontEnd/HTML & CSS

• [CSS] 레이아웃을 위한 스타일과 예제

  🌐 FrontEnd/HTML & CSS 2022. 5. 23. 18:30

  시작하면서 레이아웃을 위한 스타일을 예제와 함께 공부합니다. 1. CSS 와 박스 모델 CSS 의 박스 모델 (box model) 은 그림이나 텍스트처럼 사각 영역을 갖는 요소를 통칭합니다. 박스 모델 스타일을 이용하면 여백이나 테두리 등을 자세히 설정할 수 있습니다. 웹 문서에서 다양하게 활용할 수 있습니다. (1) 블록 레벨 요소와 인라인 레벨 요소 블록 레벨 (block-level) 요소 요소를 삽입했을 때 혼자서 한 줄을 차지하는 요소입니다. 해당 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다. 예) , ~, , , , , , , , , 인라인 레벨 (inline-level) 요소 줄을 차지하지 않는 요소입니다. 화면에 표시되는 콘텐츠만큼만 영역을 차지하고, 그 외의 공간에는 다른 요소가 ..

  Read More
• [CSS] 색상/배경 관련 스타일과 예제

  🌐 FrontEnd/HTML & CSS 2022. 5. 20. 22:20

  시작하면서 색상, 배경과 관련된 스타일을 예제와 함께 공부합니다. 1. 웹에서 색상 표현하기 (1) 16진수 표기법 #ffffff 처럼 #과 함께 6자리의 16진수로 표시합니다. 앞에서부터 두 자리씩 빨강, 초록, 파랑의 양입니다. 하나도 섞이지 않았을 때는 00, 가득 섞였을 때는 ff로 표시합니다. 사용할 수 있는 값은 000000(검은색)에서부터 ffffff(흰색)까지입니다. /* 예 */ p { color: #000000; /* 글자색 검정 */ } .accent { color: #ff0000; /* accent 클래스 스타일의 색 빨강 */ } (2) rgb와 rgba 표기법 color: rgb(255, 0, 0) 처럼 세 자리의 숫자로 표시합니다. 앞 숫자부터 빨강, 초록, 파랑의 양입니다. ..

  Read More
• [CSS] 텍스트 관련 스타일과 예제 - 2

  🌐 FrontEnd/HTML & CSS 2022. 5. 20. 22:10

  시작하면서 텍스트와 관련된 스타일을 예제와 함께 공부합니다. 3. 문단 스타일 (1) direction 속성 텍스트의 쓰기 방향을 지정합니다. /* 예 */ h3 { direction: rtl; /* 제목을 오른쪽에서 왼쪽으로 표시 */ } (2) text-align 속성 - 텍스트 정렬하기 문단의 텍스트 정렬 방법을 지정합니다. 사용할 수 있는 속성값은 left 와 right, center, justify 입니다. 기본 값은 브라우저에 따라 달라지며, 부모 요소의 값을 상속합니다. (2) 예제 텍스트 정렬 Narcissistic, my god, I love it 서로를 비춘 밤 아름다운 까만 눈빛 더 빠져 깊이 (넌 내게로, 난 네게로) 숨 참고 love dive Ooh-ooh, ooh-ooh, lal..

  Read More
• [CSS] 텍스트 관련 스타일과 예제 - 1

  🌐 FrontEnd/HTML & CSS 2022. 5. 17. 22:00

  시작하면서 텍스트와 관련된 스타일을 예제와 함께 공부합니다. 1. 글꼴 관련 스타일 (1) font-family 속성 - 글꼴 지정하기 웹 문서에서 사용할 글꼴을 지정합니다. body 태그를 비롯해 p 태그나 hn 태그처럼 텍스트를 사용하는 요소들에서 사용합니다. /* 기본형 */ font-family: "글꼴 이름", "글꼴 이름", "글꼴 이름"; /* 예 */ p { font-family: "굴림"; /* 텍스트 단락의 글꼴을 '굴림'으로 지정 */ } body { font-family: "맑은 고딕", "돋움", "굴림"; } (2) @font-face 속성 - 웹 폰트 사용하기 웹 폰트(web font) 란? 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접..

  Read More
• [CSS] CSS 기초

  🌐 FrontEnd/HTML & CSS 2022. 5. 17. 15:46

  시작하면서 CSS 의 기초를 예제와 함께 공부해 봅시다. 1. CSS (Cascading Style Sheets) (1) 왜 스타일을 사용할까? 웹 문서의 내용과 상관 없이 디자인만 바꿀 수 있습니다. HTML로는 웹 사이트의 내용을, CSS로는 웹 문서의 디자인을 구성한다는 아이디어가 바로 웹 표준의 시작입니다. 유지보수가 쉽습니다. 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있습니다. (2) 스타일의 형식 선택자 (selector) 는 스타일 규칙을 어디에 적용할 것인지를 나타냅니다. 기본형 : 선택자 { 속성: 속성 값; } p { /* 텍스트 단락을 중앙에 정렬하는 스타일 규칙 */ text-align: center; } h1 { /* 제목 1단계의 글자 크기를 10px로, 글자 색상은..

  Read More
• [HTML & CSS] 주석 다는 법

  🌐 FrontEnd/HTML & CSS 2022. 5. 16. 22:32

  HTML 문서 주석 처리 방법 HTML 문서에서 각 태그에 따라 주석을 처리하는 방법입니다. 주석 최종적으로 정리해보면 다음과 같습니다.

  Read More
• [HTML] 폼 관련 태그와 예제 - 2

  🌐 FrontEnd/HTML & CSS 2022. 5. 16. 20:13

  폼 관련 태그들 폼과 관련된 태그들을 공부해봅시다. 3. 태그의 다양한 속성 (1) autofocus 속성 - 입력 커서 표시하기 페이지를 불러오자마자 원하는 요소에 마우스 커서가 표시되도록 하는 것입니다. 이전에는 자바스크립트를 이용했지만, HTML5 에서 autofocus 속성으로 쉽게 해결할 수 있게 되었습니다. (2) placeholder 속성 - 힌트 표시하기 요소의 필드 안에 적당한 힌트 내용을 표시하고 있다가 그 필드를 클릭하면 내용이 사라지도록 하는 것입니다. 텍스트 필드 앞에 레이블을 사용하지 않고도 어떤 내용을 입력해야 할 지 알려줄 수 있습니다. (3) readonly 속성 - 읽기 전용 필드 만들기 readonly 속성은 해당 필드를 읽기 전용으로 바꿉니다. 필드 안에 내용이 있으면..

  Read More
• [HTML] 폼 관련 태그와 예제 - 1

  🌐 FrontEnd/HTML & CSS 2022. 5. 15. 16:10

  폼 관련 태그들 폼과 관련된 태그들을 공부해봅시다. 1. 폼 (1) 폼(form)이란? 사용자가 웹 페이지에 어떤 정보(값) 을 입력했을 때 그 정보를 서버에 전달하고자 할 때 폼을 이용합니다. 즉 사용자의 값을 서버에 전달해주는 일을 합니다. (2) 태그 - 폼 만들기 사용할 수 있는 속성 method : 폼을 전송할 방식 선택 name : 폼을 식별하기 위한 폼의 이름 action : 폼을 전송할 서버 쪽의 스크립트 파일 target : action 에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정 autocomplete 속성 : 사용자가 입력했던 내용을 기억했다가 비슷한 내용을 입력할 경우, 이전에 입력했던 내용을 힌트로 보여주는 속성입니다. 기본형 : 폼 요소 (2) 예제 (3..

  Read More