muntari Log muntari Log

이전 DOM에 관해 글을 남긴 적이 있다. 면접을 보게 되면서 무언가 깔끔하고 장황하지 않게 정리한 점과 몰랐던 부분에 대해 기록으로 남겨보자 한다. 알고 있는데, 듣기 쉽고 알아듣기 쉽도록 말하는 것도 능력이지 않을까 싶다. 브라우저 랜더링 정리 브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 랜더링에 필요한 리소스를 서버에 요청하고 응답을 받는다. 브라우저의 랜더링 엔진인 서버로 부터 응답받은 HTML, CSS를 파싱 하여 DOM과 CSSOM 트리를 생성하고 이 둘을 결합해 랜더 트리를 생성한다. 브라우저의 자바스크립트 엔진은 서버로 부터 응답받은 JS를 파싱 하여 AST(Abstract Syntax Tree)를 생성하고 바잍트 코드로 변환하여 이를 실행한다. 이때 js가 DOM API를..

Semantic Web이 무엇인지, Semantic tag를 사용하는 것이 왜 중요한지 설명할 수 있다. Semantic Web 이란? 과거에는, 인터넷이 발전하면서 생기는 무분별한 정보의 축적으로 컴퓨터가 스스로 정보를 해석, 가공 할 수 없어 모든 정보를 사용자가 직접 개입해서 처리해야만 했다. 따라서 의미없는 로드를 줄이기 위해 기계가 읽고 처리 할 수 있는 웹을 개발하고자 탄생한 것이 Semantic web이다. Semantic web의 구성요소 RDF(resouce Description Framework): 웹상의 메타데이터의 표현과 교환을 위한 프레임워크 XML(eXtensible Markup Language): 태그 등을 이용하여 데이터의 구조를 기술하는 언어의 한 가지, 대표적인 것이 HT..

로그인화면, 소속 및 체크박스 텍스트 박스 등 Lable , input 태그 폼 요소 각 입력 양식의 레이블을 표시 ★ 입력 양식의 클릭 가능 영역 확장 여기서 클릭 기능 영역 확장이란 왼쪽의 글씨를 클릭 시, 오른쪽 텍스트 입력 란이 활성화되는 것을 말한다. 또한 함께 활성화를 시키기 위해서는 레이블 태그에는 for 속성을/ 인풋 태그에는 id 속성으로 둘을 일치시켜줘야한다. input은 기본적으로 어떤 input인지 정해주지 않으면 자동기능이 적용되지 않는다. : 일반 텍스트 입력 : 패스워드 입력 (••• 등으로 표시) : 전화번호 입력 (모바일 등에서 전화번포 키패드 표시) : 숫자값 입력 : 체크박스 : 라디오(택일) 라디오 적용시 하나의 name 으로 묶어주지 않으면 체크박스가 여러개 선택될 ..

ul > li ol > li 샌드위치 만들기 준비물 식빵 잼 계란 순서 식빵에 잼을 바른다. 식빵 두 장을 꺼낸다. 한 장의 위쪽 면에 잼을 펴 바른다. 그 위에 계란을 얹는다. 다른 식빵으로 덮는다.

table > tr > th, td table > caption 결론 : Row = 행 ( 가로 ) : : Col = 열( 세로 ) : : table - 표 : table row - 표의 한 열 : table header - 각 열, 행의 머리 속성 역할 값 scope 무엇(행/열)의 머리인지 표시 col, row... : table data - 표의 각 칸 속성 역할 값 colspan 가로로 n개 칸 병함 칸 개수 숫자값 rowspan 세로로 n개 칸 병함 칸 개수 숫자값 ★ 다른 태그들을 포함할 수 있음. : 표의 제목 ㅇ식단표 아침 점심 저녁 밥 현미밥 호박죽 흰쌀밥 국 콩나물국 갈비탕 반찬 배추김치 컴퓨터가 이해하기 쉬운 착한 사이트를 만들기 위해 scope를 사용해주면 무엇 행/열의 머리 인지를..

개발 코드 관련 HTML ! -> 가장 기본 틀 ~ 번호별로 크기가 달라짐 (높을수록 하위 제목) 줄바꿈 적용 권장사항 h1는 페이지당 하나 순서를 건너뛰지 말 것 (예: 다음에는 ) 시각적 효과를 위해 사용하지 말 것 (디자인은 CSS로) 정보의 구조를 나타내는 용도로 사용하 것 줄바꿈 태그 vs. : break 닫는 태그 필요 없음, 위치 무관 여러번 사용 → 여러 줄 단순 시각적인 줄 바꿈 (엔터) : paragraph 정보 부여: 한 문단, 정보 덩어리임을 나타냄 CSS가 적용될 단위로 사용 단순 줄 바꿈이 아닌, 문단 구분을 위한 태그 강조 태그 vs. : bold 단순히 진하게 정보적 강조 (컴퓨터에게 중요한 정보임을 알림) 기울임 태그 vs. : italic 단순히 기울임 : emphasiz..

Vs header, footer, main…등의 Semantic 요소 Div 와 semantic 요소 태그의 차이점은 시각적으로는 차이가 없으나, 컴퓨터가 이해하기 쉬운 착한 사이트를 만들기 용이함 FastCampus Portfolio 사진 올리기 내 정보 팔로우 보기 팔로워 보기 Logout 보기 옵션 최신순 보기 좋아요 순 보기 내 사진 사진 좋아요 한 사진 팔로우 회원 사진 패스트캠퍼스 포트폴리오입니다. 수많은 이용자들이 공유하는 멋진 사진들을 구경하고 내가 직접 찍은 작품들을 공유하세요! ♥︎ 홍길동 여행중 발견한 풍경을 사진에 담아보았습니다. 회사소개 인재채용 이용약관 개인정보 보호 고객센터