목록전체 글 (352)
개발자입니다
1. File - Settings 2. Install - 'html-preview' 검색 - [atom-html-preview] 설치 3. 설치 후 Packages - Preview HTML - Enable Preview (* 만약 Preview HTML 탭이 보이지 않을 시 Atom 재부팅) 4. HTML preview
Inflearn Egoing) 섹션 4. 레이아웃 기본 - inline, block level, box model, box-sizing, 마진 겹침, 포지션
■ inline vs block level 화면 한줄 다 쓰는 태그 : block level element 자기 영역만 쓰는 태그 : inline element Hello world 안녕하세요. 생활코딩입니다. inline을 block으로 바꿀 수 있음 : display: inline or block h1{display: inline;} a{display: block} ■ box model Microsoft CSS Usage에서 CSS 사용 빈도수 확인 border: box 경계선. box 모델 크기 보기위해 사용됨 padding: box 모델 안쪽 간격 margin: box 모델 바깥쪽 간격 width: box 모델 너비 height: box 모델 높이 *inline에서는 width, height 값이..
IT BANK) JSP 5일차 - Javascript
220913 Dynamic web project 생성 - jsExam - Finish Tomcat 우클릭 - Add and Remove - jsExam Add webapp 폴더에 exam 폴더 생성 후 new - JSP file 하여 ex01.jsp 생성 -관계연산자 : 비교 연산자 == : 값이 같은지 비교 === : 값과 타입이 같은지 비교 != : 값이 다른지 비교 !== : 값이 다르거나 타입이 다른지 비교 -클릭시 경고창 발생 onclick="함수" : 클릭시 함수 실행 onchange : 변화 발생시 이벤트. 텍스트 쪽에 많이 씀 document.getElementById : id="값" 에서 값을 통해 가져옴 alert : 경고 창을 통해 출력 이름 : 아이디 : 비밀번호 : -클릭시 입력 ..
Inflearn Egoing) 섹션 3. 서체 다루기 - font-size, color, text-align, font, web font
■ font-size : 가장 많이 사용되는 속성인 font-size 단위: px, em:, rem 사용자가 글꼴 크기를 키웠을때 px은 바뀌지 않음, rem은 바뀜 em는 상위 요소 크기의 몇 배인지, rem은 최상위 요소(html) 크기의 몇 배인지 html 요소 크기의 기본값은 웹브라우저 설정에서 정한 글자 크기입니다. 보통 16px입니다. -font-size: px or rem 에 따른 차이 웹브라우저 줌인, 줌아웃시 px, rem 둘다 바뀜 웹브라우저 세팅값 변경시 px 바뀌지 않고, rem 바뀜 PX REM 웹브라우저에서 폰트 크기 변경하는 방법 웹브라우저 - 개발자 도구 - Elements - Computed에서 모든 속성 및 변경된 속성 확인 ■ color 컬러 지정 3가지 방법: colo..
Inflearn Egoing) 섹션 2. 적용 순서 - 상속, 상속되지 않는 속성, 캐스케이딩, !important
■ 상속 상위 태그인 에 color 적용시 하위 태그에 상속되어 모두 적용 수업내용 html CSS javascript 웹브라우저 개발자 도구에 태그 선택시 상속 정보 나옴(inherited from html) ■ 상속되지 않는 속성
Inflearn Egoing) 섹션 1. 선택자 (selector) - 선택자, 가상선택자
의 특정 문구만 선택하여 CSS 설정 : id 사용 HTML CSS JavaScript 1 ul li : 태그 아래 태그인 것에 모두 스타일 지정 2 #lectur>li : id가 lecture인 태그 바로 아래있는 태그에 스타일 지정 3 ul,ol : 태그와 태그에 동시에 속성 지정 *background-attachment로 배경 이미지의 스크롤 여부를 정합니다. scroll : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지는 스크롤되지 않습니다. fixed : 움직이지 않습니다. local : 선택한 요소와 같이 움직입니다. 내용을 스크롤하면 배경 이미지도 스크롤됩니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. HTML CSS Ja..