코딩을 배우는 직장인

1. 박스 모델 속성 종류 설명 width 박스모델의 너비를 지정 height 박스모델의 높이 지정 box-sizing 박스 모델의 크기를 계산하는 기준을 지정 box-shadow 박스 모델에 그림자 효과 추가 2. 테두리 속성 속성 설명 border-style 상하좌우 4개방향의 테두리 스타일을 한꺼번에 지정 border-위치-style '위치'자리에 top, right, bottom, left 특정위치의 테두리 스타일만 지정 border-width 4개방향의 테두리 두께를 한번에 지정 border-위치-width 위치 지정 두께 지정 border-color 테두리 색상지정 border-위치-color 테두리 위치 색상지정 border-radius 4개방향 꼭짓점을 둥글게 border-위치-radius..

1. 배경이미지 관련 속성 background-color 배경색 background-clip 배경색이나 이미지를 어디까지 적용할지 background-image 배경 이미지 지정 background-repeat 배경이미지 반복 방법 지정 background-position 배경 이미지의 위치 지정 background-origin 배경이미지를 배치할 기준을 지정 background-attachment 배경이미지를 문서에 고정 background 하나의 속성으로 배경스타일을 한꺼번에 지정 background-size 배경이미지의 크기 조절 2. 선형 그러데이션 관련 속성 방향 끝 지점을 기준으로 to 다음에 방향을 나타내는 예약어를 최대 2개까지 사용할 수있음. 사용할수 있는 예약어는 left, right,..

display속성에서 주로 사용 하는 값 block 인라인 레벨 요소를 블록 레벨 요소로 만듬 inline 블록 레벨 요소를 인라인 레벨 요소로 만듬 inlin-block 인라인 레벨 요소와 블록 레벨 요소를 둘다 가지고 마진과 패딩을 지정 할 수 있음 none 해당 요소를 화면에 표시하지 않음. 속성 선택자 : 속성 값에 따라 원하는 요소를 선택 ex) a[href] { } 여기서 a태그를 가지고 안에 href 속성을 가지고 있다면 스타일이 적용이 된다. / 여기서 특정 속성값이 있는 요소를 선택 할려면 [속성=속성값]을 같이 써주면 됨 ex) a[target = _blank] { } 이런 식으로 ////////////// 여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택 하는 [속성~=값] 선택..

블랙레벨 요소란! 태그를 사용해 요소를 삽입했을 때 혼자 한줄을 차지하는 것을 의미. 한줄을 차지 한다는 것을 요소의 너비가 100%라는 것! 블록레벨 요소를 만드는 대표적인 태그로는 , , 인라인레벨요소 란! 한줄을 차지 않고 콘텐츠 만큼만 영역을 차지! 그래서 나머지 공간에 다른 요소가 올 수가 있다! 대표적인 태그로는! , ,

1. text-align 종류 설명 start 현재 텍스트의 줄의 시작위치에 맞추어 문단을 정렬 end 현재 텍스트의 줄의 끝 위치에 맞추어 문단 정렬 left 왼쪽 정렬 right 오른쪽 정렬 center 중앙 정렬 justify 양쪽에 맞추어 문단정렬 match-parent 부모 요소에 맞추어 문단정렬 2. [css] text-shadow 등 설정... text-shadow: ex) h1 { text-shaodw: 1px 1px 3px #ffa500; } text-transform: 영문자를 표기할때 대소문자를 원하는대로 바꾸는 것(한글 x) 속성들!!!! none = 줄을 표시 capitalize = 첫번째 글자만 대문자 uppercase = 모든 글자를 대문자로 lowercase = 모든 글자를 ..

1. fonts.google.com 접속 이미지 썸네일 삭제 Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 들어가서 원하는 웹폰트를 찾아준다. (language는 korean으로 설정해주공) 대표사진 삭제 사진 설명을 입력하세요. 아무 거나 클릭!! 대표사진 삭제 사진 설명을 입력하세요. 이 화면 이 나오는데 이때 오른쪽에 대표사진 삭제 사진 설명을 입력하세요. import 클릭해서 밑에 코드가 2개 나온다. 대표사진 삭제 1번째 코드 대표사진 삭제 2번째 코드 대표사진 삭제 사진 설명을 입력하세요. vs code로 들어와서 style 태그 아래 부분에 1번째 코드 ..

1. 스타일 시트 종류 설명 브라우저 기본 스타일 웹 브라우저에서 웹 문서를 표시할 때 브라우저에서 기본으로 사용하는 스타일 인라인 스타일 style 속성을 사용해 필요한 요소에 스타일을 직접 지정 내부 스타일 시트 문서 앞부분에 문서에서 사용하는 스타일을 모아서 함께 정의하고 관리 외부 스타일 시트 문서에서 사용하는 스타일을 모아서 따로 파일로 저장한 후 연결해서 사용 2. css 기본 선택자 종류 설명 작성 예시 전체 선택자 문서의 모든 요소에 적용 * { margin:0; } 타입 선택자 특정 태그를 사용한 모든 요소에 스타일 적용 p { font-style: italic; } 클래스 선택자 특정 부분만 선택해서 문서 안에 여러번 적용합니다. 마침표를 붙여서 사용합니다. .bg { backgroun..

1. !important : 어떤 스타일 보다 우선 적용하는 스타일 2. 인라인 스타일 : 태그 안에 style 속성을 사용해 해당 태그만 스타일을 적용합니다. 3. id 스타일 : 지정한 부분에만 적용되는 스타일이지만 한 문서에 한 번만 적용할 수 있습니다.(선택자 이름 앞에 #기호를 사용합니다) 4. 클래스 스타일 : 웹 문서에서 지정한 부분에만 적용되는 스타일로 한 문서에 여러 번 적용할 수 있습니다.(선택자 이름 앞에 마침표(.) 기호를 사용합니다. 5. 타입 스타일: 웹문서에 사용한 특정 태그에 스타일을 똑같이 적용합니다. 같은 타입에 두가지 이상의 스타일이 적용되면 가장 나중에 선언된 스타일이 적용됩니다.

1. 글자와 관련된 속성 font-family 글꼴 종류를 지정합니다. font-size 글자 크기를 지정 font-style 글자를 이탤릭체로 표시할지 지정합니다. font-weight 글자의 굵기를 지정합니다. 2. 텍스트 스타일 속성 color 글자색을 지정 text-decoration 텍스트에 밑줄이나 취소선을 표시할지 여부를 지정 text-transform 텍스트 소대문자 설정 text-shadow 텍스트에 그림자 추가 letter-spacing 글자 사이의 간격을 지정 word-spacing 단어 사이의 간격 지정 text-align 텍스트 정렬 방법 ling-height 줄 간격 조절