코딩36 html CSS border 속성 property 사용하여 웹 페이지 라인 꾸미기 border 속성 property 활용하여 박스가 아닌, 하나의 선 만들기 유투버 생활코딩님의 2017년 10월 영상 중 "CSS-9. 박스 모델 써먹기"를 보고 실습을 해 보았습니다. 예제를 위해 아래와 같이 기본 태그를 작성합니다. 테두리를 작성하는 것이기 때문에 앵커 링크 태그는 생략했습니다. 제목 부분은 글자 크기는 45px으로 가운데 정렬합니다. WEB HTML CSS JavaScript border-bottom 속성으로 아래쪽 선 긋기 영역 WEB이라는 텍스트 아래 화면 양 끝을 채우는 선을 만들겠습니다. 마진 margin:0 속성 입력하여 줄 간격 제거하기 WEB 아래 지정한 속성의 선이 생겼습니다. 선과 1.HTML 이하 내용 사이에 여백도 자동으로 보입니다. 빨간 점선으로 표시해놓은 영역.. 2020. 8. 30. CSS 박스 모델 개념 margin, border, padding, width, height 테두리를 구성하는 border 속성 property 태두리를 만들기 위해 우선 기본 html 코드를 작성합니다. 본문에는 Test box-1, Test box-2를 작성하고 태그를 사용해 제목으로 처리해 놓습니다. 다음으로 태그에 태그에 대한 태그를 작성합니다. 테두리 선 굵기는 10px, 선 색상은 파란색, 선 모양은 일반 단선으로 합니다. border: 속성 property에 대한 값 value로서 5px, blue, solide로 입력하면 됩니다. 테두리 박스 안 여백을 조정하는 padding 속성 property 테두리 박스 안 쪽에 여백을 만들기 위해선 padding: 속성 property가 필요합니다. 속성 값은 20px로 합니다. Test box-1 Test box-2 줄 간격을 조정하는 m.. 2020. 8. 29. <style> 태그에 선택자 comma [ , ] 로 정렬하여 동시에 서식 적용하기 CSS style tag에 comma를 이용해 적용할 타깃 합치기 스타일태그에 제목, 앵커 링크 부분 등 따로 적용해 놓은 서식이 동일한 경우를 가정해보겠습니다. 이들의 선택자를 하나의 개념으로 묶어 지정한 서식이 동시에 적용되게 할 수 있습니다. 바로 comma [ , ]를 이용하는 것입니다. 아래 예시를 살펴보겠습니다. 태그의 제목 부분과 앵커 링크 태그 부분에 파란색 테두리를 만들겠습니다. 테두리는 적용되는 태그 행의 화면 전체에 적용되는 block 타입이 아니라, 자신의 텍스트 크기만큼 그려지도록 inline으로 display 값을 입력하겠습니다. 테두리 선은 일반 단선으로 하겠습니다. Coding Coding is useful. 스타일태그의 h1 선택자 이하 부분과 a 선택자 이하 부분이 중복되.. 2020. 8. 29. 이전 1 ··· 4 5 6 7 8 9 10 ··· 12 다음
