개발자 도전기

1. margin(외부 여백), pading (내부 여백) - 테두리와 다른 컨텐츠와의 거리 - margin만 음수 허용 - 텍스트 영역 상하 margin일때는 큰쪽 margin을 따라감 텍스트 영역 텍스트 영역 텍스트 영역 텍스트 영역 텍스트 영역 텍스트 영역 1-2) 여백을 4개로 설정하는 방법 - 순서가 가장 중요함 (위 부터 시계방향) margin: 30px auto 50px auto; ※ 4방향을 주는 속성은 모두 설정하는 방법이 같다. body {border: 1px solid blue; padding: 20px 30px 40px;} - 3개로 설정하는 방법 (기입하지 않은곳은 맞은편을 바라본다. / 2개 쓸때도 같음 / 1개는 4방향 전체) margin: 30px auto 50px; - pa..

※ 복습 네이밍 규칙 class : 'camel을 사용하지 않는다' 라는 점을 꼭 기억해두자 (형태)(의미)(순서)_(상태) 순으로 작성 Block, Element, Modifier css우선순위 ※ 1. font-family 스타일 - 텍스트의 글꼴모음 1-1) 사용방법 - 글꼴 이름이 두 단어 이상이면 "" 따옴표로 묶어야 한다. - 둘 이상의 글꼴을 사용하고자 할 경우 쉼표로 구분합니다. - 적용한 폰트가 없을경우 기본폰트가 적용됨 * 웹폰트 1. .eot : ms 전용(표준에 가까움) 2. woff : 비ms - 구글폰트 사용 : https://fonts.google.com/?subset=korean&noto.script=Kore - Google Fonts Making the web more be..

※ 복습 인라인태그 블록태그 - h계열태그 태그 - 영역을 담당하는 div태그 1. 시멘틱 태그 1) header - 문서나 섹션의 머릿글을 지정 - footer, section내에도 사용 가능 2) main - 본문 - 3)footer - 문서 또는 섹션의 바닥글을 지정 4) nav - 전역 탐색 바 - GNB : 상단 네비게이션 바 - LNB : 서브메뉴 네비게이션 바 5) aside - 보통 우측에 많이 붙음 - 로그인, 로그아웃, 검색 및 찾기, 사이드메뉴 등이 포함 6) section - 문서 내에서 같은 의미의 영역 제목으로 시작하는 콘텐츠를 나눌 때 사용 - 아티클의 묶음 7) article - 문서 내의 독립적인글, 블로그 글이나 뉴스 본문등을 구성하는 섹션 - 아티클 요소는 교차형태로 많..

※ 스피너바 레인지바 드롭다운 ※input태그 로그인 ID 비밀번호 아이디 저장 form 태그 1) 속성 - 텍스트를 입력할 수 있는 form태그는 길이를 제한할 수 있다 - action : 서식에 대한 통신을 할 시 수신할 페이지 - method : http프로토콜에는 메서드가 있으며 통신수단에는 method가 사용되고 4가지정도가 사용됨 form태그에 사용되는 method는 post(create / 데이터 생성), get(read / 데이터 조회) 이며 기본값은 get이다 사용자의 입력값을 서버에서 처리할 때 post를 사용한다 (get방식은 쿼리스트링에 노출되기 때문) 2) novalidate - form타입에 대한 유효성검증을 하지 않겠다는 의미 3) readonly 4) disabled 5) t..

인라인요소 (수평배치) 블록요소 (수직배치) a태그 - a태그를 통해서 링크를 걸 수 있다. 공통속성 - 타이틀, 아이디, 클래스 타이틀 - 마우스 오버시에 툴팁박스 경로해석 1. 경로구분자 : /로 구분 2. 맨처음에 사용할수 잇는 ※ 상대경로 표기법 ../ 이전 폴더 ./ 현재위치 / : 루트 링크 링크2 서버로 구동하면 workspace-ui에서 구동하기때문에 이미지가 출력되고 파일로 구동하면 경로가 제대로 지정이 되지 않았기 때문에 출력되지않는다. cmd에서도 경로를 이동할 때 "..", "."이 사용된다. * 자동완성 : tab 1. target 속성 1) 기본값 _self 2) 새탭으로 이동 _blank 3) 상위창으로 이동 _top (프레임을 대상으로 함 / 링크자체가 바뀜) 4) 부모창으로..

* HSL : 색상, 채도, 명도 RGB : ※ 웹표준 1. 뷰포트 - 2. 크로스 브라우징 - 동일한 페이지 구현이 가능하도록 하는 기술과 방법등을 크로스브라우징 이라고 한다. - 멀티브라우저에 적용되는 기술 3. 웹 접근성 1) 개요 장애인도 비장애인과 동등한 경험을 하게 하는것 2) 웹 접근성 준수 고려사항 - 시각 시각장애인 대상 (실명, 색각이상, 다양한형태의 저시력을 포함한 시각장애) - 이동성 근육제어 손실로 말미암아 손을 쓰기 어렵거나 쓸 수 없는 상태 (키보드를 통한 UI이동 예)TAB키) - 청각 영상이나 음성컨텐츠에 자막 추가 - 인지 문제해결과 논리 능력, 집중력, 기억력에 문제가 있는 정신 지체 발달 장애, 학습장애(난독증, 난산증 등) - 웹 브라우징에 쓰이는 보조과학기술 스크린..