1. Flexbox Layout Flexible Layout 아이템이 배열될 방향인 주축을 정할 수 있다. justify-content: main axis align-item: cross axis 암기팁) 저주콘서트, 크로스-라인 연습) https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 2. Box model Content - The content of the box, where text and images appear / 컨텐츠 영역, 글과 이미지 등 Padding - Clears an area around the content. The padding is transparent / b..
CSS3 Syntax | PoiemaWeb CSS(Cascading Style Sheets)는 HTML이나 XML과 같은 구조화 된 문서(Document)를 화면, 종이 등에 어떻게 렌더링할 것인지를 정의하기 위한 언어이다. 즉, CSS는 HTML의 각 요소(Element)의 style(design, layout etc)을 poiemaweb.com [CSS] 1. CSS 기본 문법 Cascading Style Sheets: 구조화된 문서를 어떻게 렌더링할 것인지를 정의 HTML5에서 HTML은 정보와 구조화, CSS는 styling의 정의 로 역할의 명확한 구분이 이루어졌다 2. 셀렉터 style을 적용하려는 html요소를 셀렉터를 통해 특정함 3. CSS 프로퍼티 값의 단위 각 프로퍼티에 따라 사용할 ..
웹 프로그래밍 튜토리얼 | PoiemaWeb Front-end Development Tutorial poiemaweb.com [HTML5] 1. HTML5 기본 문법 2014년 10월 28일 확정된 차세대 웹 표준. html5 문서는 로 시작하여야 함 대표적인 HTML Editor: VSC, WebStorm, Atom, Brackets, Sublime text html document는 element들의 집합으로 이루어짐 좋은 코드->읽기 쉬운 코드->indent 잘 하자 Attribute(속성): 요소의 성질, 특징을 정의하는 명세 -ex) src: attribute name, html.png: attribute value 2. 시맨틱 요소와 검색 엔진 시맨틱 태그: 브라우저, 검색엔진, 개발자에게 콘..
복습 을 적는 이유->검색엔진이 잘 알아볼 수 있게(html5에서만 사용) ul: unordered list ol: ordered list li: list tiem 1. CSS(Cascading Style Sheet) cascading? 상속 빨강 그대로 상속 파랑색으로 새로 정의 파랑 트리구조 우선순위 1. 사용자 스타일(컴퓨터 사용자) ex) Windows의 고대비 설정 2. 제작자 스타일(개발자) 3. 브라우저 기본 스타일 동일 대분류에 있을 경우, !important>인라인 스타일>id 스타일>클래스 스타일>타입 스타일 Selector를 통해 지정이 가능하다 인라인 스타일-> Selector id 선택자-> #아이디 { 속성 : 값, ... } 클래스 선택자-> .클래스 { 속성: 값, ... }..
복습 커밋 메시지 컨벤션을 지키는 것이 정말 중요하다. (협업 및 나를 위해->추후 이해하기 편하도록) 1. World Wide Web 세계에서 처음 나온 사이트 info.cern.ch/hypertext/WWW/TheProject.html 2. Hyper Text Markup Language p는 '문단' 은 줄바꿈 Tag와 Attribute asdf ->html5에서 사용 검색엔진은 head 부터 본다 하이라이트 태그는 h1~h6 굵게 볼드 형광펜
Weekly I Learned 3 GIT? 컴퓨터 파일의 변경사항을 추적하고 여러 명의 사용자들 간에 해당 파일들의 작업을 조율하기 위한 스냅샷 스트림 GIT branch git branch test -> test라는 branch 생성 git switch test, git checkout test -> test branch로 옮기기 git branch -> 현재 branch 상태를 보여준다. *가 붙어있는 branch가 현재 있는 branch이다 GIT merge git merge -> 새 branch와 메인 branch를 병합한다 conflict -> 충돌상황, 둘 중 하나를 골라야 함 git status ->현재 내 git 상황 보기 git add . ->staging area에 파일 추가 git c..
2023/03/08 Web Hacking 1주차 이론 Background: Web HTTP를 이용하여 정보를 공유하는 서비스 제공자: Web Server ↔ 이용자: Web Client ex) 서빙(Server) ↔ 고객(Client) at 식당 웹의 발전과 웹 보안의 중요성 웹에서 처리하는 정보를 안전하게 보관하고 처리해야 함. ex) 주소, 카드 번호 웹 서비스, 프론트엔드와 백엔드 Front-end: 이용자의 요청을 받는 부분 → Web Resource로 구성됨 Back-end: 이용자의 요청을 처리하는 부분 웹 리소스 웹에 갖춰진 정보 자산 https://a.com/index.html → a.com에 존재하는 /index.html 경로의 리소스를 가져오라는 의미 모든 웹 리소스는 URI(Unifo..