DEVELOPMENT NOTE/HTML／CSS

[HTML/CSS] 배경(background) 관련 CSS / backgorund 관련 속성 축약형

문서 내 배경의 스타일을 변경하는 CSS 모음과 축약형 정리. 배경(background) 관련 CSS 정리 div { width: 500px; height: 500px; border: 1px solid blue; background-color: lightcyan; /* 1 */ background-image: url(../img/bg_star.png); /* 2 */ background-repeat: no-repeat; /* 3 */ background-position: 50px 10px; /* 4 */ } 비어있는 div에 스타일을 부여했다. CSS 주석 번호에 따라 차례대로 기록. background-color - 해당 태그의 배경색을 지정한다. background-image - 해당 태그의 배경 이..

2022. 12. 5. 09:58
DEVELOPMENT NOTE/HTML／CSS

[HTML/CSS] 서식(font, text) 관련 CSS / font 속성 축약형

문서 내 텍스트의 스타일을 변경하는 CSS 모음과 축약형 정리. 서식(font, text) 관련 CSS 정리 텍스트 서식 관련 CSS 테스트 입니다. 텍스트 서식 관련 CSS 테스트 입니다. 텍스트 서식 관련 CSS 테스트 입니다. 텍스트 서식 관련 CSS 테스트 입니다. 텍스트 서식 관련 CSS 테스트 입니다. p { width: 600px; /* 1 */ border: 1px solid red; /* 2 */ font-weight: bold; /* 3 */ font-style: italic; /* 4 */ font-size: 20px; /* 5 */ line-height: 1.2; /* 6 */ font-family: '맑은 고딕'; /* 7 */ color: green; /* 8 */ text-in..

2022. 12. 4. 09:46
DEVELOPMENT NOTE/HTML／CSS

[HTML/CSS] 스타일 초기화 / CSS 파일 연결

CSS로 문서 스타일을 초기화하는 법과 CSS 파일을 연결하는 법 정리. 문서 스타일 초기화가 필요한 이유 링크A 링크B 링크C div가 명확히 보이도록 스타일 값을 추가한 상태. 엄밀히 말하면 기본 태그들은 입력한 그대로 나오는 것이 아니고, 약간씩 간격이나 여백이 존재한다. 추후 정확한 값으로 정밀하게 디자인을 구현하기 위해선 CSS를 활용해 '문서 스타일 초기화' 라는 작업이 필요하다. 문서 스타일 초기화 CSS로 문서의 스타일을 초기화 한 모습. div의 내부/외부 여백이 사라지고, 링크의 밑줄 효과도 없어졌으며, list의 뷸렛이 깔끔하게 빠진 모습이다. 주석 번호에 따라 위에서부터 하나씩 기록해본다. * 전체선택자(Asterisk) - 모든 요소를 선택하는 선택자. 이 경우 모든 태그에서 마진..

2022. 11. 28. 23:42
DEVELOPMENT NOTE/HTML／CSS

[HTML/CSS] 인라인(inline) 요소

HTML/CSS에서 많이 쓰이는 다양한 인라인 요소들 정리. 인라인 요소는 주로 특정 단어나 문구에 기능을 붙히거나 꾸며줄 때 사용한다. 태그 (Strong) 인라인 요소 태그 활용하기 감싼 글자를 볼드 처리해서 강조 처리한다. 태그 (Emphasize) 인라인 요소 태그 활용하기 감싼 글자를 이탤릭체(기울여진 서체)로 강조 처리한다. 태그 (Anchor) + href 특성 (Hyperlink Reference) 인라인 요소 태그 활용하기 하이퍼링크(다른 페이지로 이동)를 위해 사용한다. href로 이동할 페이지의 경로를 지정한다. target 속성으로 해당 페이지에서 바로 전환될 것인지(_self), 새 창으로 띄울 것인지(_blank) 설정할 수 있다. 인라인 요소 태그 활용하기 다른 인라인 태그와 ..

2022. 11. 25. 10:41
DEVELOPMENT NOTE/HTML／CSS

[HTML/CSS] 블록(Block) 요소

HTML/CSS에서 많이 쓰이는 다양한 블록 요소들 정리. 제목 태그 (Heading) 제목1 제목2 제목3 제목4 제목5 제목6 부터 까지 총 6단계가 있다. 숫자가 높아질수록 제목의 중요도가 떨어진다. 문단 태그 (Paragraph) 문단 태그 문단 태그 문단 태그 문단 태그 문단 태그 순서가 있는 목록 (Ordered List) 순서가 있는 목록 순서가 있는 목록 순서가 있는 목록 앞에 숫자가 붙는(넘버링) 목록 하위 항목은 태그(List)로 구현한다. 순서가 없는 목록 (Unordered List) 순서가 없는 목록 순서가 없는 목록 순서가 없는 목록 순서 구분 없이 불렛이 붙는 목록 과 동일하게 하위 항목은 태그로 구현한다. 레이아웃 구성 태그 (Division) 제목1 제목2 제목3 제목4 제..

2022. 11. 22. 10:20
DEVELOPMENT NOTE/HTML／CSS

[HTML/CSS] HTML 문서의 기본 구조

HTML 문서의 기본 구조 요약. VScode(Visual Studio Code)에서 html:5를 입력하면 나오는, 자동완성으로 작성된 HTML 기본 파일 기준이다. 일반적으로 HTML 문서의 메인 페이지는 index.html이라는 파일명으로 사용한다. HTML 태그는 여는 태그와 닫는 태그로 구성된다. 내용 편의상 해당 태그 옆에 주석 태그로 해당하는 번호를 적어놓았다. HTML 웹표준 문서임을 나타낸다. 사용 언어 (한국어면 "ko") 는 문서에 필요한 파일들을 불러오고 세팅하는 영역이다. 문자 인코딩 방식. UTF-8과 EUC-KR 두 종류가 있는데, 현재 보편적으로 쓰이는 것은 UTF-8이다. 브라우저별 호환성을 맞춰주기 위한(크로스브라우징) 기준. 비표준 버전에서 접속시 강제로 표준 모드로 바..

2022. 11. 21. 10:47
반응형