본문 바로가기

Frontend/CSS13

span 과 div 차이 Div는 Division의 약자로, 나누다, 분할하다. 의미로 문장의 가로공간 전체를 차지합니다. Span 은 Spanned 차지하다. 의미로 인라인요소이며, 문장의 길이공간만큼 차지합니다. html에서 구조를 만들때, 한 라인에 여러요소를 표현하기위해선, div가 아닌 span을 사용해야합니다. table 태그 대신 div와 span 태그로 더욱 간결한 html을 구성할 수 있다. 출처 : https://bangu4.tistory.com/27?category=904489 2022. 2. 1.
class 와 id 차이 ID는 한요소에만 사용, CLASS는 여러요소에 중복사용가능한 스타일 정의법 header, content, footer, side-bar를 id로 고유하게 사용한다 특정컨텐츠를 반복하는경우 class 를 이용하여 같은 css를 적용시킨다. ID CLASS id는 한페이지에 하나의 정의로 단, 하나의 태그(id="")만 사용할 수 있다. class는 한페이지에 반복적으로 사용되는 스타일을 정의할 수 있다. 즉 로고, 상단메뉴, 하단정보 같은 스타일을 정의할 때 id를 사용한다 반복적으로 사용되는 스타일에는 class를 이용하여 정의하고, 그 내부에 세부 스타일을 정의할 때 id를 사용해주면 효과적이다. #ID명 (선언자 : #) .CLASS명 (선언자 : . ) #footer { clear:both; ba.. 2022. 2. 1.
focus 선택자 input:hover { CSS Style } input 요소 위에 마우스 커서 올려놓을 때 스타일 지정. input:active { CSS Style } input 요소를 마우스로 클릭하는 순간의 스타일 지정. ※ 실제론 input:focus 스타일에 묻혀 효과 안 나타남. input:focus { CSS Style } input 요소에 커서 위치해 선택된 동안의 스타일 지정. 출처: https://homzzang.com/b/css-23 2021. 12. 9.
의문 Side Navigation 부터 해야함 궁금한거 1. href 바로 여러개 만드는 방법 (div class만 되는건가) 2. 아코디언 js에서 for문에서 if문 block이 뭔지 그리고 왜그렇게 하는지 (+애니메이션 함수) 3. tabs의 js 작동 원리 4. position: relative 랑 absolute 5. 반응형 탑 네비바 css 미디어쿼리에서 .topnav.responsive a에대해 js 작동 원리 6. onclikc이란? 7. css display block은 왜 잡는지? 8. overflow: hidden 이유 9. float: none 왜? 알게된거 transition: 0.4s; : hover시 부드럽게 horizontally = 수평 vertically = 수직 placeho.. 2021. 12. 7.
선택자:not(선택자) 영어 not 은 "~이 아니다" 선택자 중에서 해당 선택자를 제외한 나머지를 일괄 적용시킨다 li:not(.li1) {color: red;} ▶ 클래스값 li1 을 제외한 나머지 li의 텍스트 색을 빨간색으로 변경함 li:not(:last-child) {border-bottom: 1px solid #ccc;} ▶ 마지막 li를 제외한 나머지 li 태그에 1px의 두께를 가진 색상 #CCC의 밑줄을 넣음 li:not(:first-child)::before {content: "#";} ▶ li의 처음을 제외한 나머지의 li 요소의 앞에 기호 "#"을 삽입함 가상선택자에도 사용이 가능하다고 말씀드린게 이 예시 입니다. 예제에서의 결과를 보시면 처음을 제외한 나머지 li의 텍스트 앞에 샵이 들어간것을 확인하실 .. 2021. 12. 7.
display 속성 display 속성이란? display 태그는 화면에 어떻게 드러나게 할지를 결정하는 속성입니다. 사실 이렇게 들으면 감이 잘 안오는데 요소 크기를 어떻게 결정할건가 를 결정하는 속성이라고 이해하시는게 조금 더 감이 잘 잡히는 것 같습니다! display 속성값의 종류 display 속성값은 4가지 입니다. none block inline inline-block 예제를 보면서 설명하는게 이해가 가장 빠를 것 같습니다. HTML I am none I am block I am inline I am inline-block CSS body div { font-size: large; margin-bottom: 50px; } .none_div { display: none; background-color: bluev.. 2021. 12. 7.
position, float, display https://pjh3749.tistory.com/144 2021. 11. 30.
마진과 패딩 1) padding - 테두리와 콘텐츠 사이의 여백을 표현 - 패딩은 top, right, bottom, left 네방향을 설정 2) margin - 테두리 바깥쪽 여백을 표현 - 요소와 요소사이의 여백을 표현 - 마진은 top, right, bottom, left 네방향을 설정 3)마진과 패딩은 작성법이 동일 margin:10px; → 모든방향이 마진 10px; margin:10px 20px; → 상하, 좌우 동일 margin:10px 20px 30px; → 상, 좌우, 하 margin:10px 20px 30px 40px; → 상, 우, 하, 좌 margin-top: margin-right: margin-bottom: margin-left: 2021. 11. 29.
팁 .dbg { border : 1px dotted red; }-> 모든 레이아웃의 border line이 나타남 html에는 라고 쓰면 됨 alt 누르고 커서 누르면 다중으로 커서 작고 입력 가능함 navbar - 위 wrapper - 중간 (container) footer - 밑 주석처리를 하면서 작업 navbar-left 이런 식으로 하이픈 써가며 사용하면 편함 .navbarleft.dbg*2>ul>li*4 하고 탭키 누르면 .navbar > .navbar-left 부모자식관계 나타내줌, 보기 편하게, 나중에 복잡해지면 곤란해져서, 동작은 하나 확실하게 누군지 보기위해 svg태그 vs code 자동 줄바꿈 세팅-word wrap 검색, editor: word wrap 을 on으로 설정 2021. 11. 29.

티스토리툴바