front-end/HTMI CSS
-
HTML CSS 웹폰트 넣는 방법 & 안티앨리어싱front-end/HTMI CSS 2023. 6. 25. 18:15
1. 폰트 패밀리 설정방법 오류 없이 사용할려면 폰트의 영문명을 사용한다. 폰트명에 띄어쓰기가 있을 수 있으므로, 따옴표 안에 담는다. 폰트명을 콤마( , )로 여러개 쓰면 제일 왼쪽에 있는 폰트부터 적용. 실패하면 뒤에 있는 폰트들을 차례로 적용한다. 웹사이트 이용자의 컴퓨터에 설치가 된 폰트들을 적용이 가능하다. body { font-family : 'gulim', 'gothic' } - 사용자의 컴퓨터에 설치되지 않은 폰트를 사이트에서 이용하는 방법 CSS파일 최상단에 @font-face 라는 명령어를 넣고, 그 안에 적용할 폰트의 경로와 이름을 적어두면 된다. font라는 폴더안에 폰트(ttf 혹은 woff)파일이 필요 woff파일은 ttf대비 용량이 적은 폰트 파일로 woff파일을 구할 수 있다..
-
OOCSS, BEM class 작명법front-end/HTMI CSS 2023. 6. 22. 23:59
1. Obiect Oriented CSS 빨간색 버튼과 파란색 버튼이 있습니다. .main-btn-red { font-size : 20px; padding : 15px; border : none; cursor : pointer; background : red; } .main-btn-blue { font-size : 20px; padding : 15px; border : none; cursor : pointer; background : blue; } 아마 두개의 button에 이렇게 넣는 경우 중복된 코드가 4줄이 존재를 합니다. 버튼이 5가지 색이면? 10가지 색이면? CSS 파일에 용량이 커지면 웹사이트 로딩 속도를 저하시키는 원인이 됩니다. .main-btn { font-size : 20px; pad..
-
CSS 버튼에 커서 올려놓을때, 클릭할때 변화시키기front-end/HTMI CSS 2023. 6. 22. 23:32
1. hover 마우스를 올려놓을 때 색 변화 .btn:hover { background : chocolate; } 2. focus 클릭 후 계속 포커스 상태일때 색 변화 포커스 상태란 : 클릭 이후 다른 곳을 클릭 하지 않고 있는 상태 .btn:focus { background : red; } 3. active 클릭이 진행 중인 상태일때 색 변화 .btn:active { background : brown; } 4. 그외 :any-link /*방문 전, 방문 후 링크 한번에 선택할 때*/ :playing /*동영상, 음성이 재생중일 때*/ :paused /*동영상, 음성이 정지시*/ :autofill /*input의 자동채우기 스타일*/ :disabled /*disabled된 요소 스타일*/ :check..
-
CSS nth-child 셀렉터 짝수&홀수 td만 스타일 주는 법front-end/HTMI CSS 2023. 6. 20. 23:30
- nth-child 셀렉터 원하는 n번째 요소만 스타일을 주고 싶으면 :nth-child(n) 사용 아래 코드는 cart-table 안에 있는 모든 td를 찾은 다음 2번째 나오는 td에만 color를 줍니다. .cart-table td:nth-child(2) { color: red; } 짝수로 등장하는 td에만 스타일 주는 법 .cart-table td:nth-child(even) { color: red; } 홀수에 등장하는 td에만 스타일 주는법 .cart-table td:nth-child(even) { color: red; } 3n + 1 이렇게 작성하면 (3의배수 +1) 번째 등장하는 요소에만 스타일 .cart-table td:nth-child(3n+1) { color: red; }
-
CSS Table 테두리 밑에만 색상 넣는법front-end/HTMI CSS 2023. 6. 20. 23:29
테두리 밑에만 색상 넣는법 td, th { border-bottom : 1px solid black; } - Table HTML 구성 table태그 내에 tr은 row, td는 column을 의미 원하는 만큼 row, column을 넣어주면 표가 완성 tbody, thead는 그냥 헤드부분 영역구분을 위해 사용 td 대신 th 태그를 사용하면 기본적으로 제목처럼 굵게 처리 내용 내용 - vertical-align 테이블 내에서의 상하정렬하는 속성 top, bottom, middle 사용가능 td, th { vertical-align : middle; } inline 요소 간 상하정렬 속성도 vertical-align top, middle, bottom 말고도 super, sub, px 단위로 사용가능 G..
-
CSS position과 좌표 레이아웃front-end/HTMI CSS 2023. 6. 19. 20:53
1. 좌표속성 top, left, bottom, right 라는 속성을 사용하면 요소의 상하좌우 위치를 변경할 수 있습니다. 하지만 이 좌표속성을 사용하려면 position 속성이 필요합니다. position 속성은 좌표속성을 적용할 기준점이 지정해주는 역할 .box { top : 20px; left : 30%; } 2. position 속성 static; : 기준이 없는 상태 relative; : 기준이 본인 원래 위치 absolute; : 기준이 부모 속성 fixed; : 기준이 브라우저창 브라우저 창에 고정된 위치(스크롤시 따라옴 ex) 다음페이지, 이전페이지, 위로 스크롤 버튼) .box { position : static; position : relative; position : absolute..
-
CSS 배경넣기, margin collapse effect 해결방법front-end/HTMI CSS 2023. 6. 18. 22:50
1. 배경 CSS 속성 background-size는 px, % 단위도 가능 cover는 배경으로 전체적으로 짤리지 않게 하는 속성 contain은 배경이 짤리지 않게 하는 속성 background-attachment는 웹사이트가 스크롤될 때 배경이 동작하는 속성 .main-background { background-image : url(../img/shoes.jpg); background-size : cover; background-repeat : no-repeat; background-position : center; background-attachment : fixed; } 2. 배경 2개 겹치기 .main-background { background-image : url(../img/shoes.jp..
-
CSS selector 활용, 링크 클릭 보라색 흔적 없애기front-end/HTMI CSS 2023. 6. 18. 21:03
1. selector 사용법 사용법 1. 공백 공백을 이용해 안에 있는 li 태그인 모든 자손을 선택할 수 있습니다. 스페이스바 다음에 tag 셀렉터 말고 class 셀렉터 id 셀렉터 자유롭게 사용가능 .class .class .class 이런 식으로 무한히 연달아 사용가능 .navbar li { display : inline-block; } 사용법 2. 꺾쇠괄호 > 기호를 이용해 .li-inline 바로 밑에있는 자식만 선택 .navbar>li { display : inline-block; } 사용법 3. 더욱 상세히 선택하고 싶다면 .navbar 안에 있는 모든 li, 그리고 그 안에 있는 모든 직계 자손 span 태그를 선택 안녕 .navbar li>span { color : red; } 사용법 ..