[CSS] margin, overflow, display:none, 코드 기본 정리
2021. 12. 25. 00:25
공부/HTML, CSS
margin, padding은 시계 방향으로 위치 지정이 가능한다. margin : 15px(위) 20px(오른쪽) 15(아래) 20px(왼쪽) 그리고 직접 값을 부여하지 않은 곳은 반대편에 지정한 값을 따른다. 예) padding : 15px 20px 15px (오른쪽 20px 값을 따름) overflow:hidden을 사용하면 요소에서 넘치는 부분을 가려 줄 수 있다. display:none을 사용하면 필요 없는 요소를 숨길 수 있다. 공통된 코드들은 한 곳에 묶어서 처리하면 좋다고 한다. ul>li::after { content: ''; display: block; width: 1px; height: 15px; background-color: gray; position: absolute; borde..
[CSS] 가상요소
2021. 12. 25. 00:13
공부/HTML, CSS
CSS에선 가상요소라는 걸 추가할 수 있다. HTML에서 태그를 추가 할 필요 없이 CSS에서 필요한 부분에만 간단하게 추가 할 수 있다. li::before /*요소 앞 부분에 추가*/ li::after /*요소 뒷 부분에 추가*/ 그리고 자식 요소 중 원하는 요소를 선택 할 수있다. 방법은 아래와 같다. li::first-child::after ㄴ first-child : 첫번째 자식요소 li:nth-child(2)::after ㄴnth-child(2) : 두번째 자식요소
[CSS] 폰트 적용 방법 3가지
2021. 12. 25. 00:08
공부/HTML, CSS
첫 번째로 ttf, otf파일로 직접 적용하는 방법이 있다. 우선 font-face로 폰트를 추가해줄 수 있고, 요소에서 font-family:지정한 이름으로 사용할 수 있다. @font-face { src:url(./fonts/Cafe24Ohsquare.ttf); /*폰트 경로 지정*/ font-family: "cafe24ohsquare"; /*폰트 이름 지정*/ } 구글 폰트로 적용 구글에서 제공하는 폰트를 다운로드할 필요 없이 가져와서 사용할 수 있다. 원하는 폰트를 선택 후 복사해서 가져오기만 하면 된다.html, css 중 원하는 걸 선택 후 가져올 수 있다. 어썸 폰트 어썸 폰트는 폰트 보단 아이콘, 이미지 등을 사용하기 위해 주로 사용한다. 사용하기 위해선 라이브러리를 먼저 세팅 해주어야 한..
[CSS] position 속성
2021. 12. 21. 00:22
공부/HTML, CSS
position의 종류 : static, relative, absolute, fixed static : 모든 속성의 기본값, 움직이지 않는다. relative : 현재 위치에서 ~ 만큼. 또는 부모 요소로써의 기준점으로 사용된다. absolute : 상위 요소 기준으로 ~만큼. fixed : 화면에 고정된다. (팝업, 검색창 고정 등에 사용) relative, absolute의 관계 아래처럼 position:absolute를 사용하였지만, 상위 요소를 지정하지 않을 경우에는 태그를 기준으로 움직이게 된다. position:absolute left:10px top:10px /* absolute의 상위 요소 기준으로 ~만큼 이동한다. */ 이에 대한 해결방법은 당연하게도 기준으로 잡을 수 있는 부모 요소를 ..
[HTML] audio, video, embed 태그
2021. 12. 21. 00:12
공부/HTML, CSS
음악과 비디오를 html에 삽입하는 방법을 배웠다. 음악, 비디오 등은 , , 같은 태그로 삽입할 수 있다. 위와는 별개로 embed 태그로 video를 삽입 할 수 있는데, 유튜브 영상도 이 태그로 삽입하게 된다. 위처럼 embed 태그로 유튜브 영상을 삽입 할 수 있는데, 주소창의 주소를 그대로 입력하게 되면 오류가 발생한다. 따라서 주소를 수정해주거나, 유튜브 퍼가기 기능을 사용해서 삽입할 수가 있는데, 주소를 수정해주는 방법은 다음과 같다. https://www.youtube.com/embed/watch?v=영상 고유번호 위 주소에서 embed를 추가, watch?v= 부분을 제거하면 된다. 예시) https://www.youtube.com/embed/영상 고유번호
[CSS] Image sprite
2021. 12. 16. 01:10
공부/HTML, CSS
이미지 스프라이트는 여러개의 이미지를 따로 저장하고 불러올필요 없이, 한 파일에 여러개의 이미지를 저장하고 그 이미지의 좌표를 불러오는 방법이다. 이미지 스프라이트 제작 사이트 https://www.toptal.com/developers/css/sprite-generator/ CSS Sprites Generator CSS Sprites Generator Upload your images. (Note: Please don’t upload HUGE files. That’s not the purpose of sprites technique.) www.toptal.com .logo1, .logo2, .logo3 { background-image: url(./images/sprite.png); /* 이미지 스프라..
[HTML] table, input, form
2021. 12. 16. 00:31
공부/HTML, CSS
: 표를 만드는 태그다. : table-row, 가로줄(행)을 만든다. : 헤더 데이터를 저장하는 셀을 만든다. : 일반적인 데이터를 저장하는 셀을 만든다. 번호 이름 1 김OO 2 박OO , , : 텍스트를 입력받는다. : 텍스트 박스 배경에 문구를 추가한다. : 미리 문구를 입력해둔다. : 비밀번호를 입력받는다. : 전송 버튼이다. value는 버튼에 표시될 텍스트다. : 주로 로그인, 회원가입 창을 만들 때 사용한다. 주로 form이 input을 포함하는 형태로 사용된다. : 여기선 radio, checkbox 옆에 텍스트를 표시하기 위해 사용한다. : 하나만 선택 가능한 체크(?) 박스다. - 여러 개 중 하나만 선택 되게 하기 위해선 같은 그룹으로 묶어야 함. 그러기 위해선 name 값을 일치시..
[CSS] 내외부 여백, 모서리 둥글게, 텍스트 관련 몇 가지
2021. 12. 16. 00:15
공부/HTML, CSS
오늘 배운 CSS 속성 복습 겸 메모. margin : 외부 여백을 설정할 수 있다. padding : 내부 여백을 설정 할 수 있다. - box-sizing:border-box (패딩을 박스 내부 크기에 포함시켜서 패딩 때문에 늘어나는 것을 방지할 수 있다.) border-radius : 모서리를 둥글게 만들 수 있다. text-align : 텍스트의 위치를 지정 할 수 있다. font-size : 텍스트 사이즈를 지정 할 수 있다. font-weight : 텍스트 굵기를 지정 할 수 있다. color : 텍스트 컬러를 지정 할 수 있다.
[HTML, CSS] HTML 태그 몇 가지, CSS 속성 몇 가지
2021. 12. 11. 00:32
공부/HTML, CSS
[HTML, CSS] 오늘 배우고 주로 사용한 태그 HTML : div, span, a, img, ol, ul CSS : display, float, position (배치, 위치) margin, padding (간격 조절) [CSS] display의 대표적인 속성과 특징 display에서 사용할 수 있는 것들은 inline, block, inline-block이 있다고 한다. block의 특징 (대표적인 태그 : div) -가로, 세로 크기 적용 가능 -세로 배치 inline의 특징 (대표적인 태그 : span, a) -가로, 세로 크기 적용 불가능 -가로 배치 inline-block의 특징 -가로, 세로 크기 적용 가능 -가로 배치 여기서 알 수 있었던 건 'block'의 특징을 갖게 되면 가로, 세..