Front End

💡 -http vs https -OSI 7계층 -방화벽 -브라우저 랜더링 -https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/ 브라우저 렌더링 과정 이해하기. 최근에 백엔드 팀원들과 CS공부를 하면서, 주소창에 을 입력했을 때 일어나는 일에 대해 공부하였다. 이때 백엔드 팀원이 받아온 HTML… tecoble.techcourse.co.kr [통신] -전화 http : 통신프로토콜 https : http+보안적강화 [통신 과정] ex)카톡 애플리케이션층 : COM1 - 카톡(응용프로그램)으로 정보전송(가상의 데이터 전송) → 트랜스포트층 : 메시지 문제있는지 검사, 준비, 세팅 → 네트워크층 : 메시지를 ‘패킷’이라는 단위로 만듦 → 데..

바탕화면 바로가기 체크 실행 *visual studio 원 목적 : 메모장 자바스크립트-visual studio file-new file-’test.html’ 바탕화면에 생성 *확대/축소 :ctrl+’+/-’ open folder-바탕화면 폴더선택 yes선택 test.html 파일 선택 shift+!+enter : 기본틀 자동생성 ctrl+, : 설정파일 - 폰트크기 설정 plug-in 설정 live server install prettier-code formatter install 한국어 (선택사항) HTML CSS Support install Auto Rename Tag install Auto Close Tag install HTML Enter++ intstall - 띄어쓰기 !개발준비끝 [eclip..

text-align:글자 수평 정렬 text-decoration: 글자의 줄들 text-indent: ; (영문)대소문자 변환 text-overflow: ; 글자 들여쓰기 text-shadow: ; 글자의 그림자 text-transform: ; 영역밖의 글자 처리법 text-로 시작하는 글자 속성들 text-align: ; 글자 수평 정렬 text-decoration : ; 글자의 줄들 text-transform : ; (영문)대소문자 변환 text-indent : ; 글자 들여쓰기 text-shadow : ; 글자의 그림자 text-overflow : ; 영역밖의 글자 처리법 1. text-align : ; 글자 수평 정렬 text-align : left; 글자 수평 정렬 text-align : cen..

font-size:n; 글자 크기 지정 font-weight: ; 글자 두께 지정 font-style: ; 글자 기울기 지정 font-family: ; 글자 폰트 지정 font-size:n; 글자 크기 지정 px : 글자크기 em : 배수(상위요소의 크기에 영향을 받음) rem : 배수 (상위요소의 크기에 영향을 받지않음)(r=root) em은 배수이기 때문에 자신을 둘러싼 상위 속성을 기준으로 그 배수의 크기로 바뀜 (상대적인 크기) rem은 상위요소의 크기에 영향을 받지않음 1.font-size:n; 글자 크기 지정 [px로 크기지정] font-size:16px; 글자 크기 font-size:12px; 글자 크기 font-size:20px; 글자 크기 [em으로 크기지정] em : 배수 단위 (상위요..

pre 태그를 사용하지 않고 공백 살리기 html 파일과 css 파일 연결 [basic.html] title 밑에 선택자 { 속성:속성값; } [basic.css] .pre {white-space: pre; } // pre 태그 사용하지 않고 공백 살리기 .fs15 {font-size: 1.5em;} // 글자 크기 1.5배 .bld {font-weight: bold;} // 볼드체 span 태그 span 태그는 줄이 바뀌지 않고 문자 일부를 선택할 수 있음 선택자 { 속성:속성값; } .red {color: #f00;} 특정 글자를 선택할 시 문구가 나오게하기 선택자 { 속성:속성값; } span 태그는 줄이 바뀌지 않고 문자 일부를 선택할 수 있음 #hid { background-color : #8f..

header 머리말 상단영역 주로 로고나 로그인, 검색 등이 위치 article 독립적, 완성형의 컨텐트 영역.(블로그나 기사 등) section 주제 등으로 나눠지는 컨텐트 영역. (절, 장) aside 페이지의 주된 내용과 별개의 컨텐트 영역. 주로 배너나 퀵링크 등이 위치 footer 하단영역. 주로 카피라이트나 개인정보방침, 주소나 연락처 등이 위치 layout-tag.html 단축키 ctrl+spqce = 자동완성 ctrl+f11 = 미리보기 ctrl+f5 = 새로고침 layout tag header - 머리말. 상단영역. 주로 로고나 로그인, 검색 등이 위치 article - 독립적, 완성형의 컨텐트 영역.(블로그나 기사 등) section - 주제 등으로 나눠지는 컨텐트 영역. (절, 장) ..

css 파일 만들기 general > web browser 2. web > css files > 3. Create a Dynamic Web project webapp : 최상위 폴더 서버 ctrl f11

CSS란? CSS는 Cascading Style Sheets를 나타냅니다. CSS는 HTML 요소가 화면, 종이 또는 기타 미디어에 표시되는 방법을 설명합니다. CSS는 많은 작업을 줄여줍니다. 여러 웹페이지의 레이아웃을 한 번에 제어할 수 있습니다. 외부 스타일시트는 CSS 파일에 저장됩니다. CSS 문법 선택자 {속성:속성값;} CSS 적용법 External CSS 방식 - 외부 파일방식 스타일 소스가 웹 문서와 별개 통일성 있는 디자인 가능 유지보수 유리 Internal CSS 방식 - 내장 방식 웹 문서의 head안에 스타일소스가 위치 웹페이지에 종속적 해당문서에만 적용됨 Inline CSS 방식 - 인라인 파일방식 태그 위에 바로 스타일소스가 위치 통일성 있는 디자인 불가능 유지보수 불리 CSS..