<현록/>

[코드양 줄어드는 Class 작명법 (OOCSS,BEM)] [OOCSS: Object Oriented CSS] :뼈대와 살점을 분리하는 작명법, 뼈대 스타일이 많을 수록 편리 장점1. CSS양 줄어듦 장점2. 유지보수 편리 요즘은 React, Vue로 html 만들게 되면 작명법 없이도 잘 쓸 수 있음 작명법은 참고만 바람 더알아보기 구매하기 CSS는, .main-btn {

[pseudo-class 인터랙티브 버튼 만들기] 클릭했을 때 반응 달라지는 속성 적용하기 .cart-button { cursor: pointer; } --> 갖다대면 누르는 손가락 생김 .cart-button:hover { background: chocolate } --> 커서 갖다대면 바뀌는 색깔 .cart-button:focus { background: green } --> 커서 누르고 (다른 곳 안누르면) 유지되는 색깔 .cart-button:active { background: yellow } --> 커서 누를때 변화하는 색깔 hover, focus, active 넣을때 순서가 중요함 (hofa:호빠) 마찬가지로 input에도 인터랙티브 반응 적용 가능함 .input-test { font-siz..

[테이블 만들기] 1 2222222 3 1 2 3 tr: 가로행 td: 세로열 th: 주로 제목셀에 쓰임(볼드 처리) *tr 안에 td 넣어야 함 [vertical-align 속성] 1. inline 요소간(너비와 높이가 제한 없는 요소) 상하정렬 2. 테이블 셀 내 상하정렬(top,bottom,middle 만 사용가능) 일부 브라우저에서 table boredr-radius 안먹을 수 있음 (border-collapse와 함께하면) [테두리 일부만 주기] .cart-table td { padding: 15px; border-bottom: 1px solid #c2d3de; } --> table 안에 있는 td, border bottom 만 테두리 주기 .cart-table td, .cart-table th..

[form 과 input] input type="text" input type="text" value "aaaa" --> aaaa글자를 고정으로 채워줌 input type="text" placeholder "aaaa" --> 배경글자. 가이드 문구에 활용 (참고) input type="text" name "age" --> age 라는 이름으로 서버에 전달됨(서버개발시 필요) [드롭다운 메뉴 만들기] 1번 2번 3번 [submit 버튼 만들기] 방법1. type이 text 인것만 명령 주는 것 input[type=text] { padding: 10px; font-size: 20px; border: 2px solid black; border-radius: 5px; } [셀렉터에 콤마사용으로 여러개 동시 선택..

[꾸미기 속성] background-size: cover: 배경짤려도 상관없으니 빈공간 없이 배경으로 꽉 채워라 background-size: contain: 배경 짤리지x filter: brightness(70%) : 배경에 틴트주기 z-index: 5 --> 숫자가 클 수록 내쪽으로 다가옴, 떠 있는 요소 우선순위 주기 가능 [ margin collapse effect --> 일종의 버그 ] 원래 박스들의 테두리가 만나면 margin이 합쳐짐. (박스가 내부에서 만나든 외부에서 만나든 상관없음) 정확히 말하면 1. 마진을 하나로 합쳐주고 2. 혹여나 둘 다 마진이 있으면 둘 중에 더 큰 마진을 하나만 적용 (해결법) 두 박스의 테두리가 겹치지 않도록 만들기(부모 박스에 padding을 1px 주기) ..

nav: 네비게이션 바로서 div와 기능 동일 1. selector 사용법-공백 .navbar '공백' li { display: inline-block; } 공백: ~안에 있는 이라는 뜻 - navbar 라는 클래스 안에 있는 li 태그는 모든 자식은 ~를 가져라 2. selector 사용법- 꺾쇠 괄호 > ~ 안에 있는 직계자식만 해당됨. (공백과의 차이점) (참고) text-decoration: none --> a링크 밑줄제거

.box { width: 200px; 박스 넓이 background-color: cadetblue; 박스 색깔 margin: 30px; 상하좌우 여백 padding: 40px; 박스 내부 여백 border: 2px solid grey; 박스 테두리 및 색깔 border-radius: 10px; 테두리 두께 display: block; 가운데 정렬 margin-left: auto; 왼쪽 여백 자동 가운데 정렬 margin-right: auto 오른쪽 여백 자동 가운데 정렬 } 부모태그 width만 단독사용하면 보이지 않는 테두리 생성 자식태그에서 width:20% 이면 부모태그의 20% 너비만 차지하겠다는 뜻 div는 기본적으로 display:block 내재되어 가로로 한 행을 전부 차지한다 --> 방지하..

style 속성 안에 들어갈 코드 길어지면 css로 따로 빼서 사용 제목명.css 파일 생성 [CSS 경로 지정] head 안에 css를 불러올 경로를 지정하기 css/main : css 폴더 안에 main.css라는 파일이 있다는 뜻 --> 와 같이 수정 [class selector 설정] .profile { width:300px; display:block; margin-left: auto; margin-right: auto; margin-top: 50px } .profile, .tilte 등 '.'을 찍고 class명 지정 및 {} 사용 이름 중복 X [tag selector 설정] p { } 점찍고 class 지정하는 것 외에 다르게 지정도 가능함 모든 p 태그에 대해 일괄 지정 가능 [class ..

실제 width는 100%+20px 임