HTML10 [CSS] 패딩(Padding), 마진(Margin), 테두리(Border) CSS 박스 모델모든 HTML 요소는 박스(box) 모양으로 구성된 박스 모델을 기본으로 함 박스 모델은 HTML 요소를 테두리(border), 패딩(padding), 마진(margin) 등을 갖는다.내부 여백은 패딩 외부 여백은 마진 박스 모델 용어용어의미content (내용)텍스트나 이미지 등 박스 내의 실제 내용border (테두리)박스의 테두리 (내용과 패딩 안에 포함)padding (패딩)content와 border 사이의 간격 (안쪽 여백)margin (마진)border 밖의 여백으로, 주로 이웃 요소와의 간격(여백)으로 사용 박스 모델 기본 속성용어의미width박스의 넓이 (default: display 속성에 의해 결정)height박스의 높이 (default: 일반적으로 콘텐츠의 높이)ba.. 2024. 5. 27. [CSS] CSS 적용 방법, 스타일 적용 우선순위 1. CSS 적용 방법선언방식형태내용특성 인라인 방식 HTML 문서 안에각 엘리먼트에 속성으로스타일을 끼어 넣는 방식HTML 태그 안에style 속성을 설정 내부 방식 HTML 문서 내부에스타일 시트를 삽입style 태그 내에스타일시트 작성 외부 방식 HTML 문서 외부에독립된 스타일 시트파일을 작성하여연결하는 방식link 태그를 통해외부 CSS파일을 연결 임포트 방식 스타일시트 안에서 별개의 스타일시트 파일을 포함하는 방식스타일 시트 안에 @import 규칙으로 CSS파일을 포함 2. CSS 적용 우선순위1. 스타일 적용 우선순위!important >>> HTML style >>> #id >>> .class, :가상클래스 (가상 클래스 > 클래스)>>> 태그선택자, ::가상요소 >>> 부모에게 상속받.. 2024. 5. 25. [CSS] 블록(Block), 인라인(Inline), 인라인 블록(Inline-Block) [display : block, inline , inline-block] 1. 블록 요소 (Block Element)- 사용 가능한 최대 가로 너비를 사용함 ( 기본 너비값은 100% ) - 전체를 차지하기 때문에 각 요소들이 수직으로 쌓임 ( 한 줄에 한개만 배치 ) - width, height로 크기를 지정할 수 있음- padding, margin으로 상하좌우 여백을 지정할 수 있음 - 레이아웃을 작업하는 요소로 적합 📝 블록 태그 종류, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , 사용예시 ( ↘ 각 요소에 적용한 값 ) width: 150px; height: 30px; padding: 10px; margin: 10px;💡 그런데 잘 보면 각.. 2024. 5. 24. [CSS] 스크롤 바(Scrollbar) 스타일 커스텀하기 CSS 스크롤 바(Scrollbar) 스타일 커스텀각 아래에 대한 CSS 코드를 추가해 주면 커스텀을 할 수 있습니다.영역::코드로 적용 대상을 제한하여 사용할 수 있습니다. ::-webkit-scrollbar : 스크롤바 전체 영역에 대한 설정::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정스크롤바 스타일 적용 See the Pen 스크롤바 커스텀(Scrollbar Custom) by 권소현 (@uilserhu-the-looper) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 2024. 5. 22. [HTML] 시맨틱 태그(Semeantic Tag)란? 시맨틱 태그(Semeantic Tag) 란?Sementic 요소들로 아래와 같이 직관적으로 웹사이트를 구성할 수 있습니다. 시맨틱 태그의 종류태그설명사이트의 머리부분에 사용웹 페이지 메뉴를 만들 때 사용 메인 콘텐츠를 나타내는데 사용 제목별로 나눌 수 있는 문서의 콘텐츠 영역을 구성하는 요소개별 콘텐츠를 나타내는 요소 (여러개 반복되는 요소)좌우측의 사이드 영역사이트의 바닥부분, 주로 연락처나 제작자 정보등을 기술하는 부분 제목과 부제목을 묶어서 나타내는 요소 시맨틱 태그 상세 설명 태그는 보통 사이트의 도입부, 즉 머릿 부분에 사용되며 사이트의 로고나 제목 등을 기술할 때 사용합니다. 하나의 구역이기에 태그 안에 부수적인 태그들이 추가로 들어갈 수 있으며 주로 태그를 사용해 검색창을 넣거나 태.. 2024. 5. 13. [CSS] 4K(3840x2160)해상도 배경이미지 화면에 맞게 꽉차게 지정하기 width: 100vw / height: 100vh지정해주면 각각 컴퓨터 화면에 맞는 꽉 찬 사이즈로 자동으로 변경된다 body { width: 100vw; height: 100vh; background-image: url('./img/BG.jpg'); background-repeat : no-repeat; background-size : cover; } 2024. 5. 8. [UTIL] 소스코드(code) 자동정렬 사이트 https://tools.arantius.com/tabifier Tools - Tabifier (HTML and CSS code beautifier) - arantius.comTabifier The tabifier is a tool to properly indent computer code. The style it produces is a mix of my personal preferences for indentation plus what I could manage to make a program produce from dirty source. The tabifier currently supports CSS, HTML, andtools.arantius.com 2024. 4. 30. [HTML] 파비콘(favicon) 만들기 파비콘 만드는 방법 1. 우선 포토샵이나 이미지툴로 192*192 픽셀의 이미지를 만든다. 이미지 확장자는 png나 jpg이면 상관없다. 2. www.favicon-generator.org 사이트 접속한다. Favicon & App Icon GeneratorUpload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.www.favicon-generator.org 3. 만든 이미지를 첨부하고 [Create Favicon] 버튼을 클릭한다. 옵션은 기본적으로 체크되어있는대로 두면 된다. (Generate icons fo.. 2023. 4. 25. [HTML] 폼(form)의 이해 1. 폼 태그 동작방법1. 폼이 있는 웹페이지를 방문합니다.2. 폼 내용을 입력합니다.3. 폼 안에 있는 모든 데이터를 웹 서버로 보냅니다.4. 웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그램으로 넘깁니다.5. 웹 프로그램은 폼 데이터를 처리합니다.6. 처리결과에 따른 새로운 html 페이지를 웹 서버에 보냅니다.7. 웹 서버는 받은 html 페이지를 브라우저에 보냅니다.8. 브라우저는 받은 html 페이지를 보여줍니다. 2. 폼 태그 속성폼 태그 속성에는 name, action, method, target 등이 있습니다.폼 속성을 이용하여 전송할 때 어디로 보내야 하는지, 어떤 방법으로 보낼지 정합니다.폼 태그 속성은 다음과 같습니다.action : 폼을 전송할 서버 쪽 스크립트 파일을 지정합니.. 2023. 3. 10. 이전 1 2 다음 728x90 반응형
