타코벨코딩

인라인이냐 블록이냐 display & border 블록 레벨 요소 VS 인라인 요소 블록 레벨 요소 인라인요소 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다. [div, p,h1] 자기에게 필요한 만큼의 공간만 차지한다 [span,a] 만약 반대로 인라인 요소가 a태그가 블록을 형성하고 싶어 그럴 때 사용하는 방법은? display 속성 (사용하기) : display 에는 미리 정의되어 있는 키워드를 속성값으로 지정한다. display 속성은 요소를 블록과 인라인 요소 중 어느쪽으로 처리할지 정의한다. div{ display: block} a{display:block} inline : 인라인으로 처리한다. [필요한영역] block : 블록레벨로 처리한다. [전체영역] inline-block: ..

텍스트 꾸미기 속성 font-family : 글꼴을 정의한다 font-size: 글자 크기를 정의 text- align : 텍스트 정렬 방식을 정의 color: 글자 색상을 정의 💊font-family : 글꼴을 정의한다 *{ font-family : Time, monospance,serif} 폰트 페밀리: 요소를 구성하는 텍스트의 글꼴을 정의한다. 글꼴명을 속성값으로 지정한다. 여러개의 글꼴을 연달아 기입하여 우선순위를 지정할 수 있다. 💊font-size: 수치와 단위를 지정해 글자의 크기를 정의할 수 있다. px rem em px : 모니터 상의 화소 하나 크기의 대응하는 절대적인 크기 rem :html 태그 폰트 사이즈에 대응하는 상대적인 크기 배수 만큼 크기 조절한다! em :부모 태그 (상위태..

Css란?(Cascading Style Sheets ) Html 문서를 아름답게 꾸며주는 css 언어이며, 계단식 멋을 내다 (종이) 한장 -> 계단식으로 스타일을 정의하는 문서 이다 Css는 Html 문서에 스타일을 더해준다. HTML 문서는 태그가 태그를 포함하는 계단식 구조를 지니고 있다. Html 문서 + css 문서 => 문서 열기 => 코드 해석 문서 자체는 독립적으로 존재할 수 잇지만, 그 목적이 구조화된 html 문서의 스타일을 정의하는데 있으므로 Html 문서가 없는 css 문서는 사실상 의미가 없다. [정의] HTML : 웹 문서의 콘텐츠를 구성하는 언어 CSS : 웹 문서의 콘텐츠에 스타일을 추가하는 언어(색상, 크기, 위치) => HTML과 함께 사용되지 않는 CSS는 단순 텍스트일..

position : 포지션 말 그대로 상 태 위치 지정요소이다 포지션은 상속이 되지 않는다. relative, absolute, fixed, sticky 중 하나인 요소입니다. 즉, 값이 static이 아닌 모든 요소를 말합니다 static 은 기본값입니다. 포지션을 지정하지 않았을 대 defaut 값 가장 위 top , left 왼쪽에 배치가 된다. static 은 top, left, bottom, right 값을 전부 무시한다 상태 위치 지정 요소는 position 계산값인 relative 요소입니다. 부모 기준의 element 위치 절대적인 위치 값을 설정한다. relative 현재 위치에서 이동! left - right 왼 우 가로축 거리 지정 top-bottom 우 아래 세로 축 거리 지정 절대..

div 안에 text를 가로 세로로 정렬하는 방법을 적어봅니다 자꾸 까먹고 찾아보는 건 이해를 잘 안하고ㅠ 넘어가기 때문인 것 같습니다. 1. text-align: center; text-align 은 가로 정렬을 설정 할 수 있는 속성이다 가운데 정렬을 하기 위해 center 중앙 센터로 설정 했습니다. 2.justify-content 메인축 방향 정렬 display : flex 를 주고 justify-content: center 속성으로 설정합니다. 메인축 방향으로 정렬 (오뎅꼬치 방향으로 정렬) 그 축에서 만 움직인다 !! 3. align 수직축 ( 오뎅을 뜯어내는 방향으로 정렬) 이건 위로 아래로 움직일 수 있다 4. 세로 로 가운데 정렬 padding 사용 padding 100px 0; alig..

CSS 01 em , rem % vw vh 필수 반응형 CSS 입니다. 1. % Persent 부모 요소 사이즈 안에 패딩 상위 개념에 패딩값까지 포함한 기준 시작 % 박스 전체 크기 를 말한다 % 아까 말했지만 부모의 너비 기준으로 적용한다 Max-width 최대폭 최대값 요소의 너비와 높이 박스 는 % v*(view port) Font-siez 폰트사이지는 em ,rem 더 상세하게 적어볼게요 2. em 과 rem 차이 공통 폰트사이즈 반응형입니다 em 상위 부모 유동적 이고 rem 최상위[맨상위!!] 고정적 이다 - em relative to Parent Element [Relative] 상위 요소의[부모] 폰트 사이즈 몇배곱하기 상위 부모 사이즈 차이남 ( 유동적 사이즈를 늘어나게함) 예) 박스 ..