본문 바로가기

퍼블리싱 & 프론트엔드/html & CSS39

CSS 스타일시트 or <style> 태그 내에서 주석 처리하기 /*주석*/ CSS 스타일시트 혹은 html 문서 내에서 [TIP] html 주석과 마찬가지로 css 주석도 중첩 사용은 불가능하다. /* 이후의 첫번째 */가 주석을 끝내는 것으로 인식한다. 2020. 10. 4.
html 문서 주석 처리하기 <!--주석--> html 문서를 작성할 때, 해당 코드에 대한 추가 설명을 넣고 싶을 때가 있는데 이럴 때 주석(comment)을 사용한다. 주석은 웹 브라우저의 페이지 소스 보기 등을 통해서는 확인이 가능하지만 웹 페이지 내에는 나타나지 않는다. 주석(comment)은 해당 코드에 대한 추가 설명이나 디버깅을 위해 작성한 구문을 의미한다. 주석은 로 마무리한다. (느낌표 유무 차이) 주석은 한줄에도, 여러 줄에도 모두 적용이 가능하여 활용도가 높다. [TIP] 주석을 중첩으로 인식하지는 못하므로, 주석 안에 또 다른 주석을 사용해서는 안 된다. 2020. 9. 30.
앵커(anchor) 만들어서 페이지 내 위치 이동시키기 앵커라는 단어는 많이 들어보았을 것이다. 앵커(anchor)의 사전적 의미는 '배의 닻'을 의미하며, 웹상의 html 페이지에서는 어떤 대상의 시작 지점을 알리는 의미로 쓰이기도 한다. 페이지의 내용이 많아 스크롤이 너무 길 때, 원하는 컨텐츠를 쉽게 찾을 수 없을 때 - 앵커 태그(anchor tag)를 이용하여 편리하게 이동할 수 있다. 아래의 이미지와 같이 section1~4로 이루어진 페이지가 있다고 가정해보자. 페이지의 상단 부분에 버튼 4개를 만들어서 클릭 시에 해당 섹션으로 바로 이동하게 한다면 방문객들이 훨씬 쉽고 편리하게 컨텐츠를 이용할 수 있을 것이다. 앵커 태그는 각 섹션의 시작 지점에 아이디값을 설정하고, a 태그를 이용하여 링크를 아이디값으로 지정해 주면 된다. 예시로 div에 아.. 2020. 9. 27.
border-collapse 이용하여 div 테두리 겹침 제거 border-collapse 속성은 표(table)의 테두리를 어떻게 보이게 할지를 결정하는 css 이다. div 3개를 연속으로 나란히 배치하려고 하였는데, 테두리 겹침 현상이 있어 border-collapse 속성을 이용하여 제거했다. 아래에 그 방법을 소개하려고 한다. 먼저 아래와 같이 box1 이라는 클래스명을 갖는 정사각형 div 세 개를 배치시키고, wrap_box1 이라는 클래스명의 div로 감싸주었다. 경계를 뚜렷하게 확인할 수 있도록 모든 div에 1px의 흰색 테두리를 설정했다. div 태그는 기본적으로 block 속성을 가지고 있기 때문에 아래와 같이 세로로 나란히 정렬된다. 정사각형 div 들을 가로로 정렬시키기 위해 display:inline-block; 속성을 사용하였다. (di.. 2020. 9. 18.
텍스트 관련 CSS 이번 포스팅에서는 글자 색상을 변경하거나 그림자 효과, 여백, 자간 등을 조정하는 css 속성에 대해 정리해 보려고 한다. 색상 지정하기 h1 {color: blue;} /* 색상 이름 사용 가능 */ h2 {color: rgb(0,180,0);} /* rgb값 사용 가능*/ p {color: #4e4e4e;} /* 16진수 사용 가능 */ 텍스트에 선 긋기 p {text-decoration: none;} /* 밑줄 없음 */ p {text-decoration: underline;} /* 밑줄 표시 */ p {text-decoration: overline;} /* 영역 위에 선 있음 */ p {text-decoration: line-through;} /* 취소선 있음 */ text-decoration:n.. 2020. 9. 12.
폰트 관련 CSS CSS 공부를 시작하며 이미 알고 있는 것도 있고, 예전에는 알았지만 잊어버린 것도 있고, 새롭게 알게 된 것도 있고 해서 글꼴 관련 스타일 시트를 정리해두고자 한다. 폰트 종류 지정하기 body {font-family: "맑은 고딕", 돋움, 굴림} /* 첫번째 글꼴이 없다면 다음 글꼴로 차례대로 넘어가며 적용 */ /* 글꼴이 두 단어 이상이라면 큰 따옴표로 묶어서 표시 */ 웹 폰트 사용하기 구글 폰트 (아래 링크) 페이지에 들어가서 link 항목을 복사하여 웹 폰트를 적용할 수 있다. fonts.google.com/earlyaccess Google Fonts Making the web more beautiful, fast, and open through great typography fonts.g.. 2020. 9. 11.
CSS 여백 margin(마진) 속성 이해하기 margin 이란 정의된 테두리 요소 주위에 여백을 만들어 준다. 추가 TIP ) margin 과 padding 의 차이점 : padding은 공간 내부에서 형성, margin은 공간은 그대로 유지한 채 외부 공간을 확보하는 개념이다. padding은 안쪽 여백, margin은 바깥쪽 여백이라고 이해하면 된다. 테두리(border)를 경계로 나뉜다. margin 속성 margin-top : 상단 여백 margin-right : 오른쪽 여백 margin-bottom : 하단 여백 margin-left : 왼쪽 여백 - auto : 브라우저가 여백을 직접 계산한다 - pt, px, cm 등으로 길이 여백을 지정하거나 %를 사용하여 비율 여백을 지정할 수 있다. - inherit 속성값은 여백이 상위 요소에서.. 2020. 8. 29.
스타일과 스타일 시트, 주요 선택자 내부 스타일 시트 웹 문서 안에서 바로 스타일을 사용할 예정이라면, 사이에 태그를 만들어 그 안에 작성한다. 외부 스타일 시트 .css 라는 파일 확장자를 사용하여 외부에 별도 파일을 만든다. 웹 문서 안에서는 사이에 아래와 같이 link 태그를 사용하여 css 파일을 연결해 준다. 인라인 스타일 해당 태그에 style="속성:속성값;" 형태로 바로 입력이 가능하다. 주요 선택자 전체선택자 : *{속성:속성값; 속성:속성값; ...} → 모든 요소에 스타일 적용 태그선택자 : 태그{스타일} → 특정 태그를 사용한 요소에 스타일 적용 p{font-size:24px; font-family:굴림;} 클래스선택자 : .클래스명{스타일} → 특정 클래스에 스타일 적용 아이디선택자 : #아이디명{스타일} → 특정 .. 2020. 8. 25.
CSS 기초 - style 태그, 선택자 Style 속성을 이용해서 CSS 사용하기 html의 문법 style=" ~속성(property)~ " 자바스크립트 Style 태그를 이용해서 CSS 사용하기 : 어떤 의미도 기능도 없는 태그, css/자바스크립트 등으로 제어하고 싶을 때 감싸줌, 한줄 전체를 쓰는 태그이므로 자동으로 줄바꿈이 됨 → 줄바꿈이 되지 않는 태그가 필요하다면 을 쓰자! 해이나는 공부를 하는 중이다. 해이나는 공부를 하는 중이다. → 이 웹페이지에 있는 태그 이름이 js라면 폰트를 굵게, 색상을 빨간색으로 바꾼다. → 만약 이 글에서 해이나가 1억번 반복되더라도 상단의 선택자를 통해 한 번에 수정할 수 있다. CSS 선택자 해이나는 공부를 하는 중이다. → 클래스 앞에는 마침표(.)를 붙이고 아이디 앞에는 샾(#)을 붙인다. .. 2020. 5. 31.

티스토리툴바