몽땅뚝딱 개발자

◽ CSS3란? 차세대 HTML5 제안과 함께 CSS3라는 이름의 새로운 스타일이 나왔다. 차세대 웹 개발을 위한 새로운 표준이다. ◽ CSS3의 사용 CSS3 속성은 속성 앞에 브라우저를 식별할 수 있는 접두사인 벤더 프리픽스(CSS3 Vendor Prefix)를 붙여서 사용한다. .example { background: -webkit-gradient(linear, left top, left bottom, from(#06f), to(#f0f)); background: -o-linear-gradient(top, #06f, #f0f); -moz-border-image:url(images/border.png) 27 repeat stretch; } ◽ Prefix의 종류 webkit- 웹킷 방식 브라우저용으로..

◽ 글자에 관련된 속성 속성 풀이 font-family 글꼴 font-size 사이즈 (px, %, *em 등) * 1em은 100%와 같은 뜻으로 부모박스에서 설정한 크기와 같은 크기이다. font-weight 두께 (bold, normal 등) font-style 기울임 font-variant 작은 대문자 표현 (small-caps) line-height 줄 간격 조정 font 위의 속성들을 한 줄로 기술하는 선택자 ◽ 한번에 쓰기 font를 통해 한번에 작성할 수 있으며 순서를 반드시 지켜야하며 글자 크기와 글꼴은 절대 생략할 수 없다. font: [font-weight, font-style, font-variant] [font-size/line-height] [font-family] /* 작성 예..

속성 설명 required ​ 태그안에서 빈값으로 전송(submit) 버튼을 눌렀을 때 경고창을 띄운다. placeholder input 박스안에 미리 입력형식에 대한 힌트를 제공한다. autocomplete value는 on/off 2가지이며, 자동완성 기능 사용여부를 결정한다. list ... 텍스트 필드에 내용 입력 시 미리 만들어 놓은 리스트 항목이 자동완성 기능처럼 나타난다. list 속성의 value와 의 id 속성의 value를 같은 값으로 설정하면 된다. autofocus 페이지 로드 시, 입력필드에 자동으로 커서가 이동된다. disabled, readonly 둘 다 input 요소의 내용을 수정하거나 선택할 수 없도록 비활성화 상태로 만든다. disabled는 어떤 조건에 만족하지 않았을..

내가 아는 것보다 더 많이.... HTML5에서 input의 타입을 다양하게 제공해주고 있었다. 내가 CSS로 구현하려 했던 요소들도 이미 구현이 되어있었다. 예를 들어 검색하는 input 맨 뒤에 검색어를 초기화해주는 x 버튼이나 이메일 검사 로직 등...! (미리 알았더라면..🤦🏻) 물론 지원하지않는 브라우저도 있어서 제약이 있지만 유용하게 쓰일 수 있으니 알아두면 좋을 듯 하다. ※ 설명에 이미지는 '크롬'에서 지원하여 동작이 되는 경우에만 넣었습니다. input 타입 설명 search email 파이어폭스에서는 정확한 이메일 형식이 아니면 경고문구를 띄워준다. 아이폰에서는 입력하기 편리한 키패드로 변한다. url 파이어폭스에서는 정확한 url 형식이 아니면 경고문구를 띄워준다. 아이폰에서는 입력하..

📌 기본용어 태그(tag): 명령어의 형태가 괄호로 되어있는 것 요소(element): 같이 태그의 시작과 끝 마크업(markup): 요소를 사용하여 웹문서를 작성하는 것 속성(attribute): 요소에서 'href' 같은 것 빈 요소(empty element): 한 쌍의 태그가 아닌 하나의 태그로 되어있는 요소로 대표적으로 br, hr img input area meta link 등이 있다. 📌 마크업 작성 시 주의사항 인라인 요소는 블록 요소 안에 포함시키는 것이 좋다. DTD를 transitional(하위버전 호환)로 선언한 경우에는 통과되지만 strict(엄격한 표준 준수)로 선언한 경우 문법적 오류가 발생한다. 웹 표준 문서 작업 시 은 꼭 마크업 해주어야 한다. 보통 회사나 단체의 상호명(로..

nth-child(n)는 부모안에 모든 요소 중 n번째 요소를 선택하는 선택자이다. 처음에 nth-child를 사용했을 때 자꾸 순서가 밀려서 짜증이 났던 기억이 있다. 같은 선택자를 알아서 선택해주는 줄 알았지만.. 그냥 안에 있는 모든 요소를 처음부터 세는 것이었다. 이렇게 나열된 html의 경우에 세번째 라는 명확한 위치가 주어지면 3번째 div에 적용된다. // html 1 2 3 // css .main:nth-child(3) { background-color: red; } 하지만 갑자기 다른 요소가 중간에 있으면 :nth-child가 읽는 index가 밀리게 되어 의도한 위치에 마크업을 적용할 수 없다. // html 1 갑툭튀 2 3 따라서 이런 경우 [선택자:nth-of-type(num)]을..

◽ Sass(Syntactically Awesome Style Sheets)란? - 대표적인 CSS 전처리기 중 하나이다. - CSS가 동작하기 전에 사용하는 기능으로 CSS Preprocessor라고 부른다. - CSS 문법과 유사하지만 선택자의 중첩이나 조건문, 반복문 등을 사용하여 더 편리하게 작성할 수 있다. - 웹에서는 직접 동작하지 않으므로 전처리기로 작성 후 CSS로 컴파일하는 방식으로 사용한다. ◽ SCSS(Sassy CSS)란? - Sass의 3버전에서 새롭게 등장한 것으로, CSS와 거의 같은 문법으로 Sass 기능을 지원한다. - {}(중괄호)와 ;(세미콜론)을 사용하는 점이 두드러진 차이이다. ◽ CSS로 컴파일하는 도구 - Webpack: 모듈 번들러 - Gulp: 빌드 자동화 도..

◽ 선택자(Selector)란? 스타일에서 중괄호({ })가 나오기 전의 부분 모두가 선택자이다. HTML 안의 특정한 element를 적어준다. ◽ 선택자(Selector)의 종류 - 전체 선택자(Universal Seletor): * /* CSS */ * { background-color: black; } - 태그 선택자(Type Selector): p, div, ul 등의 태그의 이름으로 작성 /* CSS */ p { background-color: black; } div { background-color: black; } - 클래스 선택자(Class Selector): 태그에 클래스를 직접 지정한 경우로 앞에 .을 붙여 작성 /* CSS */ .className { margin: 0; } - ID..

◽ background-position - 첫번째 인자는 x축(가로), 두번째 인자는 y축(세로)이다. - 값의 형태는 %, px, cm 등 단위나 top, bottom, left, right의 방향으로도 설정할 수 있다. - 아무 값도 적지않으면 center가 기본값이다. background-position: 30% 50%; background-position: center 200px; 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

- 이미지의 사이즈가 커서 영역이 밀리는 것으로, 이미지 사이즈를 100%로 조정해줘야 한다. .mainimg_m > img { width: 100%; } 개인적으로 공부한 내용을 정리하는 블로그로 잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.