FrontEnd/HTML CSS13 Bootstrap 부트스트랩 https://getbootstrap.com/ BootstrapPowerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.getbootstrap.com 스크롤 조금 내리면 이런거 있음 ▼ ▼ 기본와꾸 2024. 7. 26. [Web] Web Workers Web Worker브라우저의 메인 쓰레드와 별도로 백그라운드에서 실행되는 스크립트오래걸리는 작업을 백그라운드에서 처리해서 메인쓰레드가 멈추거나 지연되지 않도록 함 ▶ 특징 1. 백그라운드에서 실행 :메인 스크립트와 별도로 백그라운드에서 실행됨오래 걸리는 작업이 UI 업데이트를 차단하거나 반응을 저하시키지 않도록2. 멀티스레딩 :자바스크립트는 기본적으로 싱글쓰레드 언어 (동시작이 불가능)그러나 웹워커를 사용하여별도의 쓰레드에서 코드를 실행하여 동시에 여러작업을 할 수 있게 됨3. 메시지 기반 통신 :메인 스크립트와 웹 워커 사이의 데이터 교환은PostMessage API와 onmessage 이벤트 핸들러를 사용함4. 제한된 기능 :DOM에 직접 접근할 수 없음로컬 파일 시스템에도 접근할 수 없음>> 웹워커.. 2023. 9. 8. [Web] Browser : HTTP · Cookie · WebStorage ▶ Window Browser ☞ window (객체) 창이나 탭에 대한 전역객체 웹 페이지 최상위 요소 ☞ document 현재 문서에 대한 인터페이스, HTML 문서의 모든 요소와 내용을 접근해서 조작할 수 있따 ☞ navigator 현재 사용 중인 브라우저 및 운영체제에 접근할 수 있듬 ☞ location 현재 url과 관련된 정보기능을 제공 ☞ history 브라우저 내에서 방문한 URL들의 기록 >> history stack에 접근하여 조작할 수 있음 ▶ HTTP Hypertext Transfer Protocol 웹에서 데이터를 주고 받기 위한 프로토콜 통신 프로토콜: 컴퓨터에서 데이터 교환 방식을 정의하는 규칙 체계 클라이언트(사용자 브라우저) 와 서버간의 통신 담당 요청(Request)과 응.. 2023. 9. 8. [Web] CSS : 텍스트 꾸미기 1. font-size글자 크기.text-size { font-size: 24px;} 2. color글자 색.text-color { color: #ff6347;} 3. font-weight 글자-두께: normal | bold.text-thickness { font-weight: bold;} 4. text-decoration글자-장식: none | underline | overline | line-through 등.text-decoration { text-decoration: underline;} 5. text-align글자-정렬: left | center | right | justify | start | end.text-left { text-align: left; .. 2023. 9. 5. [Web] CSS : 색 표현 색상 1. 이름을 사용한 색상 지정미리 만들어져있는 색깔이 140개 정도 있음 2. 16진수 코드를 이용한 색상 지정 # 뒤에 문자쌍 3개로 이루어짐 3. RGB, RGBARGBA : Red, Green, Blue, Alpha(투명도 0~1) 4. HSL, HSLAHue 색조Saturation 채도Lightness 밝기Alpha 투명도 div { color: 글자색; background-color: 배경색; border-color: 테두리색;} 2023. 9. 5. [Web] CSS : Selector 선택자 SelectorHTML 요소를 식별하여 스타일 규칙을 적용하는데 사용되는 패턴, 표현→ 셀렉터를 사용해서 특정요소나 요소그룹을 선택하고, 해당 요소에 스타일을 적용할 수 있음 1. Tag Selector 태그 이름HTML 태그 이름을 셀렉터로 선택하여 사용p { color: red;} 2. ID Selector ID 선택자HTML에 지정된 고유한 ID 속성값을 기반으로 선택하여 사용ID 이름은 해시(#) 으로 시작ID는 고유한 속성이므로 기본키와 같이 하나만 존재해야함 id를 사용해보는 예제 #sample { color: red;} 3. Class Selector 클래스 선택자HTML에 지정된 클래스 속성값을 기반으로 선택하여 사용함클래스 이름은 마침표( . )으로 시작여러개의 클래스를 .. 2023. 9. 5. [Web] CSS : 상속 상속특정 속성값이 부모로부터 자식에게 전달되는 것 ▼ 예시와 함께 보기[부모 : div | 자식 : p] 텍스트 텍스트 텍스트 텍스트 border-width, border-style, border-color inherit : 부모 요소로부터 값을 상속받는 키워드 모든 CSS 속성이 상속되는 것은 아님일반적으로 보더 패딩 마진과 같은 박스 모델 속성은 상속 되지 않음 2023. 9. 5. [Web] CSS CSSCascading Style Sheet웹페이지 스타일 정의 선택자(Selector) CSS 셀렉터는 스타일을 적용할 HTML 요소를 식별하는 데 사용 (ID, CLASS) 속성과 값(Proporties & Value) 선택한 요소에 적용할 스타일은 (속성 : 값)으 정의함ex) color : red; 선언 블록한 개 이상의 CSS 코드를 {중괄호}로 감싼 것속성과 값으로 이루어진 값들이 들어있음 Rule set셀렉터와 선언 블록을 합친 것특정 HTML 요소에 여러 CSS요소를 적용할 때 사용 상속(Inheritance)부모 요소와 자식 요소로 상속됨 우선순위(Specificity)와 캐스캐이딩(Cascading) 여러 스타일을 같은 요소에 적용할 때, 우선순위와 Cascading 규칙에 따라 .. 2023. 9. 4. [Web] HTML : Web Form 웹 폼 Web Form사용자로부터 정보를 입력 전달받는 요소데이터를 수집하고 서버로 전송하여 처리함 태그 사용하여 정의함 1. 폼 요소의 컨테이너 역할action 속성으로 데이터 경로 설정method로 전송방식 설정 2. 다양한 종류의 입력 필드사용자에게 입력받을 수 있음 Male Female 3. 여러줄의 텍스트를 입력할 수 있는 영역 4. 클릭 가능한 버튼을 정의SubmitResetClick Me 5. 입력 필드와 관련된 텍스트 설명을 작성하는 역할Username: 6. 데이터 목록을 가진 텍스트 선택창드롭다운으로 리스트 출력 7. 콤보박스, 데이터 목록을 가진 텍스트 선택창 United States Canada United King.. 2023. 9. 4. [Web] HTML : Sementic tag 시맨틱 태그 Sementic tag 문서구조화시맨틱 태그를 사용하여 웹 문서의 구조와 의미를 전달시맨틱 태그는 콘텐츠의 의미와 역할을 설명하고 검색 엔진 최적화와 웹 접근성(SEO)을 향상시킴 기존 HTML은 웹 문서 구조를 표현하는 태그가 없었음→ 나 로 구조화 되어보이게 작성했었음→ HTML 페이지의 소스를 보면 문서 구조를 파악할 수 없었음 시맨틱 웹 : 웹 문서를 구조화하여 의미 있는 내용 탐색이 용이한 웹시맨틱 태그 : 문서의 구조와 의미를 전달하는 태그 1. HTML 문서의 최상위 요소모든 HTML요소는 저기 안에 포함되어야 함 2. 문서의 메타데이터, 스타일시트, 스크립트 등의 정보를 포함하는 부분(브라우저 표시 X) 3. 실제로 화면에 나타나는 요소가 들어가는 부분 4. 웹 페이지 상단에 나타나.. 2023. 9. 4. [Web] HTML : Inline Frame (iframe) Inline Frame iframeHTML 요소를 다른 웹페이지나 현재 웹페이지에 삽입하는 데 사용현재 페이지 일부 영역에서 다른 문서를 표시하고 상호작용을 하며, 독립적인 컨테이너 역할을 함 문서 삽입 : src 속성을 활용하여 다른 웹페이지, 문서, 이미지, 동영상 등 외부 리소스를 삽입할 수 있음 독립성 : 독립적인 컨테이너를 가짐 → iframe 내부에 로드된 문서는 외부 문서와 격리되어 있음 (충돌 방지) 크기 조절 상호작용 : iframe과 다른 문서들이 상호작용이 가능 충돌 및 성능 고려사항 : iframe 너무 많이 사용하게 되면, 성능 저하가 일어남 ( 부모, 자식 프레임 충돌발생 주의 ) 보안 고려사항 : CORS 정책으로 일부 사이트에서는 다른 도메인의 리소스가 인라인 프레임으로 .. 2023. 9. 1. [Web] HTML 태그 또는 또는 기본 구조 hello world! 태그 종류타이틀 달기 ~ 문단 제목 달기여러 HTML 태그들을 블록으로 묶는 컨테이너단락 나누기텍스트 일부분에 특별한 모양을 주거나 할 때 사용이 안에 있는건 고대로 출력됨horizontal rule 수평선break 줄바꿈&npspnon break space 띄어쓰기진하게중요한강조이탤릭으로 강조작은문자취소선밑줄선윗첨자아랫첨자하이라이팅이미지리스트표anchor 앵커 div와 span의 차이 division블록 단위의 컨테이너 요소다른 요소들을 그룹화 하는데 사용 (div 안에 넣으면 한줄로 나옴)div 태그는 다른 요소들과 줄바꿈 되어 나타남 (블록단위여서)인라인 단위의 .. 2023. 9. 1. [Web] 학습 일정 정리 1. HTML(Hyper Text Markup Language)웹 페이지의 구조와 내용 - 뼈Hyper Text :어딘가와 연결되어 있는 텍스트Markup Language :태그로 이루어진 언어웹 문서의 구조를 정의하고 콘텐츠를 표현하는 기본 마크업 언어 2. CSS(Cascading Style Sheet)웹 페이지의 모양(디자인) - 가죽스타일 시트 혹은 종속형 시트Cascading : 폭포처럼 물 흐르듯이 HTML 문서에 레이아웃과 디자인을 포함한 시각적 요소를 정의하기 위한 규격 3. Javascript웹 페이지의 행동 · 응용 프로그램 - 근육스크립트 언어로 이루어짐(응용 프로그램을 제어하는 역할을 한다는 뜻)자바와 연관 없음ㅎ HTML 문서에서 동적으로 변하는 콘텐츠를 표현하기 위해 이벤트 .. 2023. 9. 1. 이전 1 다음
