width와 height 속성은 border(테두리)와 padding을 제외한 content(내용물)의 크기만을 나타냅니다. 그래서 아래 코드를 실행해보면 p1과 p2의 크기가 다릅니다. #p1 { border: 3px solid red; width: 400px; height: 200px; margin-bottom: 100px; } #p2 { border: 3px solid red; width: 400px; height: 200px; padding: 20px; } p1의 경우 가로는 406px이고 세로는 206px입니다. p2는 가로 446px이고 세로는 246px입니다. 결국 가로 400px이고 세로 200px로 만들기 위해서는 border과 padding 속성을 다 계산하고 width, height ..
border-radius border-radius 속성을 통해 모서리를 둥글게 만들 수 있습니다. p{ border: 3px solid red; border-radius: 10px; } 값이 커질 수록 더욱 둥글어집니다. 또한 각 모서리를 개별 설정할 수 있습니다. p{ border: 3px solid red; border-top-left-radius: 5px; /* 왼쪽 위 */ border-top-right-radius: 10px; /* 오른쪽 위 */ border-bottom-right-radius: 20px; /* 오른쪽 아래 */ border-bottom-left-radius: 0px; /* 왼쪽 아래 */ } background-color background-color 속성을 통해 배경생을 지..
요소의 가로 길이(width)와 세로 길이(height)를 설정할 수 있다. p { border : 3px solid red; width: 200px; height: 300px; } 최소, 최대 길이 min-width, max-width, min-height, max-height 를 이용해서 가로, 세로의 최소, 최대 길이를 지정할 수 있다. Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates debitis pariatur omnis! Optio ipsa rem qui ratione natus, inventore illum sed minima, quibusdam aspernatur quia laboriosam reprehenderit ..
border : 테두리 border Test 이렇게 테두리의 속성을 하나씩 지정 가능하다. border-style : 테두리 스타일 border-color : 테두리 색상 border-width : 테두리 굵기 한 줄로 작성 border Test1 border Test2 border Test3 이렇게 굵기, 스타일, 색 순서로 한 줄로 작성할 수 있다. 또한 #p3처럼 각각의 설정을 줄 수도 있다. 참고 태그와 같이 기본적으로 테두리가 설정된 요소에 테두리를 없애고 싶으면 border: none; border: 0; 이렇게 border 속성을 지정하면 된다. 부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다. 이 글에 부족한 부분이 존재할 경우 추후에 수정될 수 있습니다.
요소 : 내용(content), 패딩(padding), 테두리(border)로 이루어져 있다. Padding : 내용과 테두리 사이의 여유 공간 Margin : 요소 주위의 여백(테두리 밖의 공간) Padding padding을 주는 여러 가지 방법 가장 직관적으로 padding 주는 방법 padding 속성을 이용하면 순서는 위 오른쪽 아래 왼쪽 이다(시계방향) 모두 같은 padding 속성을 주고 싶으면 그냥 padding에 값만 입력하면 된다 좌, 우 값이 같고 위, 아래 값을 같게 주고 싶으면 padding 속성에 위, 아래 값(20px)을 주고 좌, 우 값(40px)을 주면 된다. Margin margin 도 동일하다. #p1 { border: 3px solid red; margin-top: 3..
Loerem으로 채우기 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum unde inventore soluta? Temporibus impedit eius aliquid voluptates, deserunt ipsam nostrum, laudantium molestias odit repellendus maxime facilis possimus veritatis, atque architecto? 이 문서를 보면 padding border margin을 이해할 수 있는데 실제 내용은 검은 바탕이고 padding은 빨간 선 안의 흰색 부분으로 내용과 테두리 사이의 공간이고 border은 빨깐 선이고 margin은 그 바깥의 흰 부분으로 다른 요소 ..
클래스 세 번째 문단 첫 번째 문단 // 이렇게하면 두개 클래스 동시에 사용 가능 .txt { font-size: 64px; color: blue; } 아이디 첫 번째 문단 #first-txt{ color: blue; } 클래스와 아이디 차이 같은 클래스 이름을 여러 요소가 가질 수 있지만, 같은 아이디를 여러 요소가 공유할 수는 없습니다. 한 요소가 여러 클래스를 가질 수 있지만, 한 요소는 하나의 아이디만 가질 수 있습니다. (단, 한 요소가 클래스도 여러 개 갖고 아이디도 하나 가질 수 있습니다!) 결국 여러 요소를 스타일링 하고 싶으면 → class 한 요소만 스타일링 하고 싶으면 → id 주석 /* css 주석 */ 부족하거나 잘못된 내용이 있을 경우 댓글 달아주시면 감사하겠습니다. 이 글에 부..
웹사이트 타이틀 제목1 숫자가 커질수록 작아진다 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 선언 HTML 파일을 쓸 때는 가장 먼저 선언을 써야한다. 태그 페이지의 제목/ 브라우저 탭이나 방문 기록에 나와있는 제목임 ~ 태그 한 페이지에 여러 개의 머리말 태그 보통 문단은 (paragraph) 태그 안에 태그 위, 아래에는 기본적으로 여백이 조금씩 있다. 태그 텍스트를 굵게 태그 텍스트 날려쓰기(italics) Phrase Tags 태그는 그냥 텍스트를 '볼드체'로 만들어주고, 마찬가지로 태그는 그냥 텍스트를 '이탤릭체'로 만들..
GET 방식 ex)https://n.news.naver.com/article/005/0001518197?cds=news_media_pc https://n.news.naver.com/article/005/0001518197 ? → 요청 페이지 cds=news_media_pc → 전송 데이터 주소 + 데이터(모두 노출) 기본 전송 방식이고 사용이 쉽다. 전송할 데이터를 문자열 형태(Query String)로 URL 뒤에 인수로 붙여서 전송을 수행하는 방법(방식) URL 뒤에 인수로 붙어있는 내용을 누구나 볼 수 있고 이로 인해 보안성이 취약하다. 태그에서의 GET 방식은 서버로 데이터를 전송하는 과정에서 서버 처리가 지연될 경우 중복해서 요청이 이루어진다는 문제가 발생할 수 있다는 단점을 가지고 있다. 형식..
http://www.yes24.com/Product/Goods/103389317 Do it! 자바 완전 정복 - YES24 이 책은 ‘이제 막 프로그래밍에 입문한 사람’에게 꼭 필요한 기본기부터 ‘찐개발자’라면 꼭 알아야 할 내용까지 국내 집필서 중 가장 많은 도해와 그림을 이용해 설명한다. 특히 프로그래 www.yes24.com Do it! 자바 완전 정복 책을 공부하며 요약・정리한 내용입니다. 상속 부모 클래스의 필드, 이너클래스, 메서드를 자식 클래스 내부에 포함시킴 부모클래스 ← 자식클래스 class 자식클래스 extends 부모클래스 { ... } 부모 클래스는 자식 클래스의 공통적 특징을 모아 구성한 클래스 이다. 자식클래스는 부모 클래스의 모든 멤버(필드, 이너클래스, 메서드)를 내려받고 자..