본문 바로가기

개발/Web Front-End

 (17)
[Web front-end] script 위치와 defer async 브라우저를 렌더링 하는데, 다음과 같은 레이어를 가지고, 각각의 역할은 아래 링크 보기. 렌더링 엔진에 주목할 것인데, 렌더링 엔진은 HTML, CSS를 파싱한 결과물로 페이지를 화면에 표시하고 JS를 해석한다. 그 과정에서 파싱을 진행하는데, 파싱은 가장 작은 단위로 쪼개진 코드(토큰)를 구조화하는 과정이다. 입력받은 문자열이 정해진 문법(grammar) 들을 모두 따르는지를 어휘와 규칙은 맞았는지 확인을 한다. 브라우저는 HTML, CSS, JavaScript 세 종류의 언어를 해석할 수 있고, 그 중에서 JavaScript는 별도의 레이어에서 언어를 해석한다. 따라서 렌더링 엔진에서는 HTML과 CSS만 파싱한다. 1. head 태그 내부에 script 태그 HTML은 파싱 도중, HTML은 파싱 ..
[Web Fe] CSS 정리하기 4 이번 포스팅은 마지막 CSS정리를 해보는 글입니다. 상속 상속은 부모나 조상 요소에 적용된 CSS 프로퍼티를 자식 혹은 후손 요소가 물려받는 것입니다. 위의 코드를 실행해 보면 , article의 얍얍얍만 빨갛게하고싶은데 전부 빨게지는게 보일것입니다. 이는 이렇게 편하게 상속을이용해 한꺼번에 내부 태그들의 색상을 바꾸는 것입니다. 하지만 모든 프로퍼티가 상속되는것이 아닙니다. width나 height margin padding등 상속이 되지않은것도 많습니다. 상속 여부는 https://www.w3.org/TR/CSS21/propidx 링크에서 확인 가능합니다. 상속이 되지 않는 프로퍼티를 값을 상속받기를 원한다면, inherit를 써주면 됩니다. 제일 처음 css가 뭐라했는지 기억하실겁니다. cascad..
[Web Fe] CSS 정리하기 3 이번 포스팅 역시 CSS학습 내용을 기록을 했습니다. 6장 : 박스모델 개념 Html요소는 앞선강의에서 언급 했다시피 태그와 컨텐츠로 이루어져있습니다. 그중 우리는 컨텐츠에 집중해볼것입니다. Html의 모든요소가 박스형태를 갖는다는것은 브라우저에서 출력되는 컨텐츠가 사각형의 박스형태를 갖는다는것입니다. 그렇다면 이 박스형태는 어디에 쓰는것일까요. 컨텐츠 배치와 요소박스의 크기를 계산해 출력할수도 있습니다. 그래서 옳은 브라우저에서 출력을 위해 박스모델 개념이해가 중요합니다. 위의 그림의 박스형태를 가리켜 박스모델입니다. 박스모델은 패딩 보더 마진 컨텐츠의 구성입니다. 먼저 컨텐츠는 이미지나 텍스트같은 우리가 태그사이에 담은 실제 컨텐츠를 담고있는 부분입니다. 보더는 컨텐츠를 감싸고 있는 테두리선입니다. ..
[Web Fe] CSS정리하기 2 저번 포스팅에 이어서 CSS 학습내용을 정리 할 것입니다. 값, 단위, 색 앞에서 소개했듯이 값이란, 키워드나 특정 단위(픽셀 퍼센트)를 이용하여 원하는 스타일을 적용합니다. 이는 속성과 쌍을 이뤄 사용합니다. Css에서 background등 다양한 속성이있는것과 같이 다양한 값이 있습니다. 그리고 이러한 프로퍼티마다 쓸수있는 값이 정해져있습니다. 예시로 position프로퍼티는 Static absolute relative fixed의 값을 사용합니다. 이와 같이 프로퍼티에 사용되는 값을 아는 것은 매우 중요합니다 값의 자리에 들어갈수 있는 값은 숫자값, 키워드, 색 등 다양합니다. 보통은 글자사이즈 너비나 높이를 정하는데 숫자값을 이용한다. 숫자값으로 크기를 조정합니다 숫자값 단위에는 수많은 단위가 존..
[Web Fe] CSS 정리 하기 1 (+BootStrap) 이번에는 CSS에 대해 자유롭게 정리 해보는 포스팅입니다. 동시에, 인기가 많은 Bootstrap도 정리해볼 것입니다. CSS는 HTML로 만들어진 콘텐츠에 레이아웃과 디자인요소를 정의하는 기술로 잘 설계된 css 는 재활용이 가능하며 나아가 테마, 템플릿의 형태로 확장할 수 있습니다. 부트스트랩은 부트 스트랩은 트위터에서 개발한 UI 라이브러리 입니다. 목적 - 모바일 환경에 적합한 반응형 웹을 개발하기 위한 라이브러리 - 디자인으로 인한 개발시간을 단축하기 위한 개발도구 그렇다면, CSS를 사용하는 이유가 뭘까요? 1.관리에 유용합니다. HTML에서 스타일 관련 부분만 담아놓은것이 CSS이기에 관리에 용이. 2.재사용성을 높힐수 있습니다. 스타일 서식을 공유해서 여러 웹페이지 디자인에 재사용, 통일할..
[Web Fe] 콘텐츠모델, 시멘틱마크업, 블록 & 인라인 이번 포스팅은 부스트코스 콘텐츠 모델, 시멘틱마크업, 블록 & 인라인 파트를 포스팅합니다. HTML요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들이 있는데, 이런 규칙들을 그룹화 시킨 것이 콘텐츠 모델입니다. 1. Metadata 모델 Metadata에는 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함됩니다. 메타 태그, 타이틀 태그, 스타일 태그, 스크립트 태그, 링크 태그가 이에 해당하며 대부분 내에 들어간다는 것이 특징입니다. 2. Flow 모델 Flow에는 문서의 자연스러운 흐름에 의해 배치되는 요소들이 포함됩니다. Metadata에 해당하는 일부 태그들만 Flow에서 제외되며 요소 대부분이 Flow에 포함됩니다. 3. Sectioning ..
[Web Fe] HTML 태그 이번 포스팅은 HTML 태그 파트를 공부 및 정리 겸 더 알아본 부분을 정리했습니다. HTML은 태그들의 집합입니다. HTML은 버전이 업그레이드되면서 태그가 새로 추가되기도 하고 삭제되기도 합니다. 그 모든 태그를 전부 외우긴 힘들고 쓰임새가 있다는 것만 알아두면 좋을 거 같습니다. 제목과 단락요소 태그 태그 등 제목 태그가 있는데 그 중요도에 따라 h1 h2 등을 부여하면 됩니다. 본문 태그는 body안에 기재합니다. 태그 | paragraph , 본문을 표시. 태그 | break, 줄 바꿈. 더 알아본 태그들. + 태그 | preformatted 입력한 그대로 표시 태그 | 굵은체로 변환 태그 | 기울임 태그 | 글자를 아래로 내려서 기입. 태그 | 글자를 위로 올려기입 태그 | 글자 아래 밑줄 삽..
[Web Fe] HTML 이해하기. 1. HTML 이해하기. 웹페이지를 만드는언어. 웹 페이지의 구조와 내용을 나타내는 'HTML' 쉽게말해, 우리가 HTML코드를 작성하게 되면 브라우저는 그것을 해석해서 화면을 나타내줍니다. 조금더 찾아본 내용. 웹 페이지의 구조 혹은 데이터 작성을 위한 마크업 언어 웹 서버에서는 HTML 문서를 저장하고 있다가 클라이언트가 특정 HTML 페이지를 요청하면 서버에서 해당 문서를 반환합니다. * 하이퍼텍스트 = 사용자가 흐름을 선택하여 정보를 찾는 형식 * 마크업 언어 = 문서의 논리적 구조를 명시함 태그(마크, 표시)를 이용 * HTML은 파일 확장자로 .html을 씁니다. ** HTML 문법 ** * 태그 * 속성 * 태그와 중첩 * 빈 태그 * 공백 * 주석 HTML 문법 - 태그 무언가를 표시하기 ..

티스토리툴바