front-end
-
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; } 사용법 ..
-
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..