본문 바로가기

Room 103. Front-end

 (18)
뉴 렉쳐 [웹 표준 기반의 웹 퍼블리싱 HTML5, CSS] 강의 (1) 기본기 다지기 - 유튜브 뉴 렉쳐 채널의 [웹 표준 기반의 웹 퍼블리싱 HTML5, CSS] 강좌 (총 38강) 해당 채널은 강의 컨텐츠의 역사부터 현재까지 흐름과 트렌드를 빠짐없이 강의해주는 개인적으로 매우 유익한 내용을 담고 있다고 생각되는 채널입니다. 지난 부스트코스의 HTML 기초에 이어 HTML5, CSS 의 기초를 확실히 다지고자 뉴 렉쳐의 HTML5, CSS 강좌를 학습하기로 결정하였습니다. 이 다음으로 유튜브 NomadCoder 의 바닐라JS 강좌를 학습할 예정이기에 HTML5, CSS 를 꼼꼼히 복습해놓도록 할 것입니다! 기초가 탄탄하지는 않지만 나름 만 2년 8개월 동안 실무를 경험했기에.. HTML 태그 실습과 같은 부분은 정리 없이 빠르게 넘어가고! 나중에 다시 한 번 복습하고 싶은..
"웹 서비스 개발 중 마주했던 CORS(Cross-Origin Resource Sharing)" 너무 잘 정리되어 있어 내용을 그대로 퍼왔습니다. 원문 참고 : https://ithub.tistory.com/63 : https://velog.io/@jmkim87/%EC%A7%80%EA%B8%8B%EC%A7%80%EA%B8%8B%ED%95%9C-CORS-%ED%8C%8C%ED%97%A4%EC%B3%90%EB%B3%B4%EC%9E%90 1. CORS(Cross-Origin Resource Sharing) 이란? : CORS는 Cross-Origin Resource Sharing의 약자로 보안상의 이유로, 브라우저들은 스크립트 내에서 초기화되는 cross-origin HTTP 요청을 제한합니다. 예를 들면 다음과 같습니다. 위 예제에서 사이트의 도메인은 www.a.com인데 Ajax를 할 경우 www.b..
"[HTML5] SVG vs Canvas?" - Canvas vs SVG : canvas 요소와 svg 요소는 거의 같은 결과물을 얻을 수 있는 비슷한 동작을 하는 요소입니다. 어떤 경우에는 canvas 요소를 사용하는 것이 더 나으며, 어떤 경우에는 svg 요소를 사용하는 것이 더 나은 경우가 있습니다. - 작업 환경에 따른 선택의 기준 다음 그림은 화면 크기 및 픽셀 수에 따른 렌더링 시간(rendering time)을 보여줍니다. 렌더링(rendering)이란 프로그램을 사용하여 모델로부터 영상이나 화면을 만들어내는 과정을 가리킵니다. 따라서 렌더링 시간이란 코드를 실행하여 그 결과가 화면에 표시되는 시간을 의미합니다. - canvas 요소의 성능은 화면이 작거나, 픽셀 수가 많을 경우(>10k)에 좋습니다. - svg 요소의 성능은 화면이 ..
"Cross Browsing?" 1. Cross Browsing 이란? : 크롬, 사파리, IE, 오페라, 파이어폭스 등등 브라우저의 종류는 매우 다양합니다. 이 많은 브라우저들의 동작 방식은 W3C라는 국제 웹 표준화 기구에서 제공하는 스펙(가이드 라인)을 따라서 동작합니다. 하지만 W3C에서 제공하지 않은 아주 세밀한 스펙 내용들은 각 브라우저에서 상황에 맞게 구현되어 있습니다. 이 부분이 Chrome을 기반으로 개발한 웹 어플리케이션이 다른 브라우저에서 Chrome과 같이 완전히 정상적으로 동작할 것이라 생각해선 안되는 이유입니다. 즉, 크로스 브라우징이란 표준 웹 기술을 따르면서 다른 기종 혹은 플랫폼에서 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하..
"HTML 메타데이터와 태그에 대해 알아보자" ... MDN 참고하여 사용! 참고 : https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
"Web Browser 는 어떻게 동작하는가?" ... 매우 심도 있는 내용으로 지속적으로 공부하여 정리! 참고 : https://janghanboram.github.io/2018/06/06/browser-rendering/ : https://d2.naver.com/helloworld/59361
부스트 코스의 [초보자를 위한 HTML & CSS 동작과 원리] 강의 - (2) 기본기 다지기 - 부스트 코스의 [초보자를 위한 HTML & CSS 동작과 원리] 강의 HTML 이란 무엇인가와 HTML의 튜토리얼 강의 2번째 정리 글입니다. CHAPTER 4: Layout 설정 (1) Position 속성을 위한 Layout CSS 속성 중 position 에 대한 개념 강의입니다. position 에 할당되는 값은 태그의 위치 값을 조정하는 데에 사용됩니다. static / relative / absolute / fixed 네 가지 속성으로 구성되어 있습니다. static position 설정의 default 값입니다. top/right/bottom/left 에 관계없이 엘리먼트 위치에 고정적으로 위치합니다. relative 자신이 위치한 박스 포지션에서 top/right/bott..
부스트 코스의 [초보자를 위한 HTML & CSS 동작과 원리] 강의 (1) 기본기 다지기 - 부스트 코스의 [초보자를 위한 HTML & CSS 동작과 원리] 강의 HTML 이란 무엇인가와 HTML의 튜토리얼을 위한 간략하게 잘 정리된 강의입니다. 주니어 탈출기로 프론트엔드 개발자 첫 밑바닥을 이 강의와 뉴렉쳐의 HTML/CSS 강의를 함께 복습하기에 적합한 강의였습니다. CHAPTER 1: HTML을 통한 웹사이트 구조 설계 HTML 이란 무엇인가. HyperText Markup Language html, head, body 로 구성되어 있으며 head 는 화면에 보여지기 위한 추가적인 메타정보를 담고 있고 body 는 화면에 보여지는 부분을 담당. CHAPTER 1: HTML을 통한 웹사이트 구조 설계 HTML 이란 무엇인가. HyperText Markup Language h..

티스토리툴바