front-end/HTMI CSS
-
CSS 박스 만들기, float, inline-blockfront-end/HTMI CSS 2023. 6. 18. 19:13
1. 박스 만들기 .box { margin : 20px; padding : 30px; border : 1px solid black; border-radius : 5px; } margin은 바깥 여백 padding은 안쪽 여백 border는 테두리 (차례로 두께, 선의 종류, 색상) border-radius는 테두리 라운드 처리 - margin과 padding을 원하는 방향 .box { margin-top : 20px; padding-left : 30px; } top, left, bottom, right 중 원하는 곳에만 여백이 가능하다. margin은 음수도 가능합니다. margin : 5px 6px 7px 8px; 이렇게 띄어쓰기를 이용하면, 차례대로 상 우 하 좌 마진을 5,6,7,8px 이 가능합니..
-
CSS margin, padding, border, positionfront-end/HTMI CSS 2023. 6. 7. 12:03
1. margin 테두리를 기준으로 바깥쪽 여백 margin-top : 10px > 위쪽만 10px margin-botton : 10px > 아래쪽만 10px margin-top,bottom,left,right 내용 - body를 0px로 변경할 경우 body{ margin: 0px; } 웹 페이지에 여백 없이 나온다. * margin 겹침 현상 형제 관계인 요소의 margin 값이 중첩되면, 더 큰 값을 가진 margin영역으로 병합 되는 현상 2. padding 테두리 기준으로 요소의 안쪽 여백을 지정하는 속성 테두리와 내용(content) 사이의 여백 크기가 커진 것처럼 보인다. 3. border border - radius : 테두리 모서리 궁들게 만드는 속성 div{ width: 100px; h..
-
CSS 공간분할태그, 가시속성front-end/HTMI CSS 2023. 6. 7. 11:10
1. 공간분할태그 경계를 분할하거나 영역을 나눌 때 사용하는 태그 , 오늘부터 지각 금지! 1번 BOX 3번 BOX는 1번 BOX 안에서 또 공간을 나눔 3번 BOX 아래인데 1번 BOX 영역이야 2번 BOX 2. 가시속성(visibility) - visible : 눈에 보이게 하는 속성 - hidden : 눈에 보이지 않는 자리는 차지함 회색 box 안 (노란 box 공간) (초록 box 공간) * hidden과 none의 차이점! - hidden 자리를 남긴다. #yellowB { width: 100px; height: 100px; background-color: yellow; visibility: hidden; } - none 자리도 삭제를 한다. #yellowB { width: 100px; hei..
-
CSS 크기 단위, 디스플레이, selectorfront-end/HTMI CSS 2023. 6. 7. 11:02
1. 크기 단위 em : 부모의 크기를 기준으로 하는 상대 배수 단위 2em : 부모의 2배 크기 rem : 문서 폰트 크기에 따른 상대 배수 단위 px로 조절 em으로 조절 rem으로 조절 2. display block 웹페이지의 가로 공간을 모두 차지하는 속성 ex) div, p, h1, ul, ol, table... inline 내용만큼만 너비를 가지는 속성 ex) span, a, strong, texttarea... none 해당 요소를 보이지 않게 지정 - block width, height 값 설정이 가능 span { background-color: brown; } span { background-color: brown; display: block; } - inline width, height..
-
CSS 기본 구조 및 선택자front-end/HTMI CSS 2023. 6. 5. 12:51
1. CSS 란? - Cascading Style Sheet HTML 문서의 스타일을 꾸밀 때 사용하는 스타일 시트 언어 HTML 정보 CSS 디자인 2. CSS 기본 문법 Selector(선택자), Value(속성값), Property(스타일속성) - 작성 방법 선택자 { 선언 선언 } * 선언 방법 속성 : 값; h1{ color: indianred; background-color: silver; } - font 속성 글자의 폰트를 정의하는 속성 font-family 글꼴 font-size 글자크기 font-weight 글자두께 font-style 글자 스타일 h2{ font-family : '나눔고딕', '굴림','돋움'; /* 글꼴의 집합, 최대한 비슷한 폰트 사용하기 */ font-size: 5..
-
HTML 입력 양식 태그 & 이미지 클릭으로 링크 이동front-end/HTMI CSS 2023. 6. 3. 13:46
- 이미지 클릭으로 링크 이동 ex) 이미지 클릭하면 네이버로 이동 1. 입력양식 태그 - form 태그 사용자로부터 데이터를 입력받아서 전송할 때 사용 method : 데이터가 서버로 제출될 때 사용 action : 데이터를 전송할 위치 - input 태그 입력을 받는 태그 * name속성은 필수 name은 입력받은 데이터를 구분하는 역할 입력받은 text가 id인지 name인지 구분 placeholder : 미리보기 기능 value : 기본값 지정 ID를 입력하세요 : 이름을 입력하세요 : 비밀번호 입력 : - select 태그 구글 네이버 카카오 * option태그가 아닌 select태그에 name을 지정하는 이유 사용자는 option중에서 최종 1개만 선택을 하기 때문에, 1개 데이터만 전송 op..
-
HTML 기본 태그 & 코드 정렬 커맨드front-end/HTMI CSS 2023. 6. 2. 12:46
- 코드 정렬 커맨드 Windows : Shift + Alt + F MAC : Shift + Option + F Linux : Ctrl + Shift + I 1. HTML의 기본태그 글 본문 글 제목 링크 버튼 리스트 리스트 태그을 열면 태그를 닫아야 된다. but 닫지 않아도 되는 태그도 존재를 합니다. 대표적으로 가 있습니다. 특정 태그는 안에 href=" ", src=" " 이런 속성을 집어넣어서 추가 정보를 입력이 가능합니다. href는 클릭시 이동할 링크 기입 가능하고, src는 파일 경로를 기입 가능합니다. 용도에 맞는 태그를 사용를 해야 됩니다. HTML은 마크업언어기 때문에 자료의 구조를 쉽게 파악 하는것이 목적입니다. 용도에 맞는 태그를 사용하면 더욱 '웹표준'에 맞게 됩니다. 1.1 다..