코딩을 배우는 직장인

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. 타입 스타일: 웹문서에 사용한 특정 태그에 스타일을 똑같이 적용합니다. 같은 타입에 두가지 이상의 스타일이 적용되면 가장 나중에 선언된 스타일이 적용됩니다.

종류 설명 text 한줄짜리 텍스트를 입력할 수 있는 텍스트 박스 password 비밀번호를 입력 할 수 있는 필드 search 검색할때 입력하는 필드 url url 주소를 입력 할수 있는 필드 email 이메일 주소를 입력할 수 있는 필드 tel 전화번호를 입력할 수 있는 필드 checkbox 주어진 여러항목에서 2개이상 선택할 수 있는 체크박스를 넣습니다. radio 주어진 여러항목에서 1개만 선택할 수 있는 라디오버튼을 넣습니다. number 숫자를 조절 할 수 있는 스핀박스를 넣습니다. range 숫자를 조절 할 수 있는 슬라이드 막대를 넣습니다. date 사용자 지역을 기준으로 날짜(연,월,일)를 넣습니다. month 사용자 지역을 기준으로 날짜(연, 월)를 넣습니다. week 사용자 지역을 기..

size 텍스트와 비밀번호 필드의 길이를 지정. 화면에 몇글자가 보일지를 지정한다. value 텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용. 이 속성을 사용하지 않으면 빈 텍스트 필드가 표시된다. maxlength 최대 글자 수

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 줄 간격 조절

1. 폼에서 사용하는 태그 폼의 시작과 끝을 만듭니다. 폼 요소를 그룹으로 묶습니다. 필드셋에 제목을 붙입니다. 사용자가 내용을 입력할 필드를 삽입합니다. (input type속성태그는 아래 정리.) , 드롭다운 목록을 삽입합니다. 텍스트를 여러 줄 입력할 수 있는 텍스트 영역을 삽입합니다. 데이터 목록을 삽입합니다. 2. 태그의 유형(type) text 입력할 수 있는 한줄짜리 텍스트 상자 password 비밀번호를 입력할 수 있는 필드 search 검색할때 입력 하는 필드 url url 입력필드 email tel 연락처 입력필드 checkbox 주어진 여러 항목에서 2개 이상 선택할 수 있는 체크박스 radio 주어진 여러 항목에서 1개만 선택 number 숫자를 조절할 수 있는 스핀박스 range ..