Web
Web14 :: Element가 배치되는 방법(CSS layout)(2)
Web14 :: Element가 배치되는 방법(CSS layout)(2)
2019.01.06해당 내용은 부트스트랩 Web 코스 강의를 듣고 정리한 것입니다. 엘리먼트가 배치되는 방식 엘리먼트를 화면에 배치하는 것을 layout 작업이라고도 하고, Rendering 과정이라고도 합니다. 편의상 우리는 배치라고 할 겁니다. 기본 엘리먼트는 위에서 아래로 배치되는 것이 기본입니다. 하지만 웹사이트의 배치는 다양하게 표현 가능해야 하므로, 이를 다양한 방식으로 배치할 수 있도록 다양한 속성을 활용합니다. 중요하게 이해해야 할 속성은 다음과 같습니다. display(block, inline, inline-block) position(static, absolute, relative, fixed) float(left, right) 이 속성을 중심으로 엘리먼트의 배치를 이해할 겁니다. 엘리먼트가 배치되는 방..
Web13 :: Element가 배치되는 방법(CSS layout)
Web13 :: Element가 배치되는 방법(CSS layout)
2019.01.06해당 내용은 부트스트랩 Web 코스 강의를 듣고 정리한 것입니다. 학습 목표 layout의 방식에 대해서 이해합니다. 엘리먼트는 html tag들을 말한다. 엘리먼트를 화면에 배치하는것을 레이아웃 작업이라고 한다. (=렌더링 과정) CSS display 속성에 값이 block, inline, inline-block (좌에서 우로 흐른다.) float는 기본 엘리먼트 배치에서 벗어나서 떠있는 느낌으로 * 블록으로 쌓이는 엘리먼트(display:block) block1 block2 block3 =위에서 아래로 쌓이게 된다. * inline 속성은 오른쪽으로 흐르게 한다. 옆으로 흐르는 엘리먼트. 꽉차면 오른쪽 아래로 찾아서 들어간다. * 좀 다르게 배치시키기(position 속성) 특별한 배치를 하기 위해 ..
Web12 :: CSS 기본 Style 변경하기
Web12 :: CSS 기본 Style 변경하기
2019.01.06해당 내용은 부트스트랩 Web 코스 강의를 듣고 정리한 것입니다. CSS 기본 스타일 변경하기영상 우측 하단에 자막 스크립트 ON 설정을 한 후 강의를 시청하시면 학습에 도움이 됩니다. CSS style 적용은 글자색, 배경색 등이 가장 자주 사용되는 것들입니다. 이런 속성은 위치 값과 크기를 지정하는 것과 달리, 색상 위주로 값을 부여합니다. 색상 관련 값은 다양한 색을 일관된 방법으로 표현하기 위해 주로 16진수 표기법을 사용합니다. font 색상 변경 color : red; color : rgba(255, 0, 0, 0.5); color : #ff0000; //16진수 표기법으로 가장 많이 사용되는 방법이죠. font 사이즈 변경 font-size : 16px; font-size : 1em; 배경색..
Web11 :: CSS Selector
Web11 :: CSS Selector
2019.01.06해당 내용은 부트스트랩 Web 코스 강의를 듣고 정리한 것입니다. * CSS Selector 들어가기 전에 특정 엘리먼트에 스타일을 적용하기 위해서는 해당 엘리먼트를 잘 찾아야 합니다. 특정 엘리먼트뿐 아니라 여러 개의 엘리먼트일 수도 있습니다. 엘리먼트를 쉽고 빠르게 찾을 수 있는 CSS Selector 문법을 알아보겠습니다. 학습 목표 기본적인 Selector 문법을 이해한다. *CSS Selector 트리 구조로 되어있는것을 빠르게 찾아가는 방법이다. id는 document, 즉 html 페이지에 하나만 쓰는것이 좋다. 유니크 한것. 공백으로 하면 하위에 있는 요소들을 선택할 수가 있다. CSS selector HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법입니다..
Web10 :: 상속과 우선순위 결정
Web10 :: 상속과 우선순위 결정
2019.01.06해당 내용은 부트스트랩 Web 코스 강의를 듣고 정리한 것입니다. 학습 목표 CSS 상속의 특징과 상속이 되지 않는 상황에 대해서 이해합니다. 상속 : 상위에 설정된 스타일을 하위에서도 쓴다. (재사용 측면에서 훌륭하다.) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 body > div{ color : green; font-size : 30px; border:2px solid slategray; padding : 30px; } my text is upper! my text is dummy Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, l..
Web09 :: CSS 선언 방법
Web09 :: CSS 선언 방법
2019.01.04CSS 기본 사용법 CSS 선언 span { color : red ; } (selector, property, value) style을 html 페이지에 적용하는 세 가지 방법 inline internal external *inline HTML 태그 안에다가 넣는 방법을 우리가 inline 이라고 한다. Hello World! 같은 셀렉터로 동일한 속성 값의 어떤 다른 value를 넣었다 그러면 inline에 적용된게 최우선이다. *internal 구조와 css 섞여 있으면 안좋음. head안에 넣는다. *external 별도의 css 파일을 만들어서 include 시킨다. javascript로 동적으로 css코드를 수정하려고 하면 어떻게 해야 할까요? 나중에 차츰 알게 되지만, 미리 어떤 방법이 있을지..
Web08 :: class 와 id
Web08 :: class 와 id
2019.01.04class 는 하나의 HTML 안에 중복해서 여러 군데 같이 쓸 수 있다. id는 하나 이상 써도 된다. 같은 class 이름을 가진 것들이 같은 스타일을 갖게 된다. ID고유한 속성으로 한 HTML 문서에 하나만 사용 가능합니다.고유한 ID 값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이합니다. Class하나의 HTML문서 안에 중복해서 사용 가능합니다.하나의 태그에 여러 개의 다른 class 이름을 공백을 기준으로 나열할 수가 있습니다.홈페이지 전체적인 스타일을 일관성 있게 지정하기 위해서는 class의 사용이 필수적입니다.이렇게 구분할 수 있지만, 많은 회사마다 개발단계에서 어떠한 약속(convention)을 만들어서 자신들만의 규칙을 사용하기도 합니다.예를 들어 ID사용을 금하는..
Web07 :: HTML 구조설계
Web07 :: HTML 구조설계
2019.01.04HTML 구조설계 구조화 설계는 마치 문서를 쓴다고 생각하면 쉽습니다. 현업에서는 Presentation 문서형태의 기획서나 디자인 파일을 받아서 그것을 기반으로 HTML개발을 시작합니다. 즉 어떠한 화면을 보면서 그대로 구현하는 것이죠. 그 화면을 보면서 구조를 분석해야 합니다. 먼저 영역을 나눠서 상단/본문/네비게이션 이런 식으로 큰 부분부터 분리합니다. 그 뒤에 각 영역 안에 내용의 구조를 잡는 것이 일반적입니다. 각 영역 안의 내용 역시 여러 가지 형태일 겁니다. 목록을 나타내거나, 이미지를 나타내거나, 문단을 나타낼 수 있습니다. 이때마다 적절한 태그를 쓰면 됩니다. 그러면서 영역 안에 또 다른 영역이 있다면 점점 안으로 좁혀가면서 HTML tag를 사용하면서 완성해나가는 겁니다. 이때 CSS코..
Web06 :: HTML Layout 태그
Web06 :: HTML Layout 태그
2019.01.03tag의 종류 의미에 맞춰 사용해야 한다. 링크, 이미지, 목록, 제목 html tag list div : 특정 영역을 정의한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 JS Bin 반갑습니다 여기 여러분들이 좋아하는 과일이 있어요. 사과 바나나 메론 귤 Colored by Color Scripter cs 화면을 구성하는것 = layout footer - 최신 모바일 환경에서 쓴다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 JS Bin header home news sports 로그아웃 오늘의 날씨 운세 footer Colored by Color Scripter cs 간단한 웹..
Web05 :: WAS
Web05 :: WAS
2019.01.03클라이언트/ 서버 구조 서비스를 제공하는 것을 서버, 서버에게 서비스를 요청해서 그 결과를 보여주는 것을 클라이언트 라고 한다. DBMS 와 클라이언트 우리가 아는 데이터베이스. 데이터 관리 목적 미들웨어 클라이언트와 DBMS 사이에 서버를 두는 방식이다. 미들웨어 에서 대부분 로직 수행 클라이언트는 화면에 보여주기만 하면됨 WAS 웹에서 데이터를 입력하고 조회하는 등의 동적인 기능이 요구되었다. 처음에는 정적인 기능밖에 없었다. 브라우저 와 DBMS 사이에서 동작하는 미들웨어가 WAS 라고 한다. WAS의 기능 3개 프로그램 실행 환경과 데이터베이스 접속 기능을 제공한다. 여러개의 트랜잭션을 관리한다. 업무를 처리하는 비즈니스 로직을 수행한다. 트랜잭션은 논리적인 작업단위 웹서버는 보통 정적인 콘텐츠를..
Web04 :: browser에서의 웹 개발
Web04 :: browser에서의 웹 개발
2018.12.31브라우저에서 웹 개발. 브라우저 하면, 엣지 브라우저, 사파리 같은 브라우저 통해서 인터넷 들어간다. 웹 사이트 , 크롬 브라우저 개발자 도구를 연다. 코드가 잘 동작하는지 브라우저를 열고 확인을 한다. 크롬 개발자 도구를 통해서 어떤 문제가 있는지 없는지 = 디버깅, 디버깅 과정을 위해서 개발자 도구가 필요하다. Network - 새로고침 단계 www.amazon.com 을 enter를 치는 순간 서버로 요청이 가는 것이다. 서버에서 응답 값을 준 값들을 response 항목에서 볼 수 있다. response가 서버에서 첫번째 보내준 소스코드라고 할 수 있다. 용량을 줄이기 위해서 압축 하기도 한다. meta 태그 = 문서가 어떤 것인지 브라우저에게 알려주는 것이다. ex) utf-8 이런것처럼 htm..
Web03 :: browser의 동작
Web03 :: browser의 동작
2018.12.31브라우저 엔진 : 소스코드를 화면에 실행해서 보여줌, 브라우저 소프트웨어를 동작시켜주는 핵심엔진 렌더링 엔진 : 화면에 직접 위치 잡고 색칠 해주는, 픽셀단위로 어떤게 그려져서 눈으로 다양한 형태를 볼수가 있다. 데이터 관리 영역 : 브라우저 캐시 를 한다. 브라우저는 http를 통해서 웹 서버 특정 인터넷 주소를 해석한 다음에 그 주소로 통신을 한다. 자바스크립트 인터프레터 : 자바스크립트 코드 해석 UI Backend : UI를 처리하는 백엔드 영역이 있다. * 렌더링 엔진 파이어 폭스의 Gecko, 사파리엔진의 Webkit, Chrom이 오픈하는 Blink 이런것들이 있다. 브라우저 별로 가지고 있다. 브라우저 엔진의 메인 플로우 HTML 파싱을 한다. 문자단위로 해석을 해서 이 내용 의미 파악. ..