개발하는 삶

*헷갈리는 부분을 다시 보충해서 정리하기로 했다 하이퍼링크 등 텍스트 꾸며진 상태에서 css 속성 넣을때 꼭 그 속성태그를 찝어서 css로 꾸며줘야함 div로 전체적으로 묶어서 찝기보단 div input 이런식으로 해야함 text-decoration none : 밑줄 지우기 (하이퍼링크 등 꾸밈요소 지울때) underline : 글자 아래 밑줄 line-through : 취소선 display none : 보이지않음(아예 없음. 영역도 차지하지 않음) block : 블록박스 (블록태그인 div,p,h,li 에 해당.) 가로영역을 다 채움. width, height 속성을 지정할 수 있음 inline : 인라인박스 (인라인태그이 span, b, i, a 에 해당.) width, height 지정 불가능. 줄..

flexbox 수평축/수직축, 중심축/반대축 아이템 꾸미기/ 아이템을 감싸는 컨테이너 꾸미기 display:flex; 를 하고 해야함 fiex-direction : row; //기본(수평) fiex-direction : reverse; //반대로 fiex-direction : column; //수직 column-reverse //수직인데 반대로 flex-wrap : nowrap; //페이지를 줄여도 한줄에 계속 붙어있게함. (기본값) wrap; //페이지를 줄이면 그 줄에 사이즈가 안맞는것들은 다음라인으로 넘어감 flex-flow : column nowrap //wrap이랑 direction 합해서 쓰는것 //중심축에서 아이템을 어떻게 배치할건지 (그 영역 중심축에서 봤을때 왼/중/오 선택하는 느낌) j..

CSS 박스 테두리까지가 박스사이즈. (마진은 외부크기) 컨텐츠 : 내용 패딩 : 컨텐츠간의 거리 마진 : 박스 외부 border border-style 기본값 : none border-width 테두리 두께 지정 thin < medium < thick 순으로 두꺼움 border-color 테두리 색 설정 border-left-color : red; //왼쪽 테두리만 빨강 border-color : red; //전체 테두리 빨강 테두리 전체적으로 설정하기 border: 굵기 선형태 색; border: 30px dotted blue; //30px 점선으로 파란색 테두리 둥굴게 border-radius: 50% 50%로 하면 둥근 원처럼 사용 가능 표 설정 table { caption-side: bottom..

텍스트 스타일 font-style : normal / italic (기울어짐. *보통 이걸 사용) / oblique font-weight : 굵기 normal(400. 기본두께), bold (700. 두껍게). 100~900까지 가능 font-size : 크기 16px (기본크기), 단위(px, em, rem 단위로 지정) line-height : 한 줄의 높이(행간 느낌) normal (브라우저의 기본정의를 사용), 숫자(1.4 = 1.4배. 요소의 글꼴 크기의 배수로 지정) 단위(px,em,rem 등의 단위로 지정) font-familly : 서체(글꼴) 지정 font-family: 글꼴1, “글꼴2”(띄어쓰기, 특수문자가 포함된 글꼴은 “”로 묶음) serif //바탕체계열 sans-serif //..

캐스케이딩 스타일 시트 우선순위에 따라 적용할 스타일 순서를 결정한다는 뜻 우선순위 위에서 아래로 맨 마지막, 나중에 적용된 스타일이 더 우선순위를 가짐. 사용자스타일(시스템에서 만든 스타일) → 제작자 스타일(제작자가 만듬) → 브라우저 스타일(브라우저의 기본 스타일) !important(스타일 뒤에 붙여주면 됨) → 인라인스타일(body태그) → id스타일 → 클래스 스타일 → 타입 스타일 스타일 상속 자식요소에 별도 스타일이 없음 → 부모요소 스타일이 자식 요소로 전달됨 모든 속성이 다 상속되는 건 아님 css 기본단위 크기 픽셀 기본단위 16px 백분율 단위 100% 배수 단위 1.2em (1.2배) // 1.2rem (최상위 요소를 기준으로 1.2배) 디바이스 마다 보이는 html 영역에서 1...

스타일 시트(여러 스타일들을 묶어놓은 것)를 사용하여 꾸며준다 외부 스타일 시트 불러오기 선택자 전체선택자, 타입선택자 등 //전체선택자 : 웹문서 전체 수정, 초기화하고 싶을때 사용 * { margin: 0; //바깥여백 제로 padding: 0; } //태그선택자 p { color: blue; //p태그가 사용된 곳 전체를 스타일 적용하기 } //class선택자. (다중선택) .redtext { //클래스 선택자 이름 지정하기 color: blue; //해당 클래스 내 문서에 적용 } //id선택자. (중복없이) #container { color: blue; } //그룹 선택자 h1, p { //h1,p부분 모두를 color: blue; //이와같이 수정 } //속성 선택자. 태그[]에 속성 넣어주면..