전체 글
블록 요소와 인라인 요소의 차이와 태그 설명 ✔️
HTML 태그에는 블록 요소와 인라인 요소가 존재합니다. 블록 레벨 요소는 새로운 줄에서 시작하며, 차지할 수 있는 모든 가로 길이(width)를 차지합니다. 반면, 인라인 요소는 새로운 줄에서 시작하지 않으며, 자신의 콘텐츠 만큼의 길이를 차지합니다. 블록 요소를 사용하는 태그들 블록 레벨 요소는 새로운 줄에서 시작하며, 화면의 왼쪽에서 오른쪽 끝까지의 길이를 차지합니다. 다음은 블록 요소를 사용하는 일반적인 태그들입니다. Headings , , , , , Paragraphs ... 인라인 요소만 내부에 포함할 수 있음 Divs ... 보통 하나의 문단보다 긴 영역을 포괄 인라인 요소를 사용하는 태그들 인라인 요소들은 새로운 줄에서 시작하지 않으며, 자신의 콘텐츠 길이만큼의 공간을 차지합니다. 다음은 ..
HTML 기본 용어 요소, 태그, 속성 설명
HTML을 이해하려면 다음의 세 가지 기본 용어에 대해 알아야 합니다. 요소(elements) 태그(tags) 속성(attributes) 요소 요소(elements)는 페이지 내 구조와 콘텐츠를 정의합니다. 가장 많이 사용되는 요소로는 제목에 사용되는 ~ 요소와 문단에 사용되는 뿐, 그리고 , 등이 있습니다. 이처럼 요소는 을 사용하여 표시합니다. 태그 태그(tags)는 요소를 감싸고 있는 를 일컫습니다. 이러한 태그는 보통 여는 태그와 닫는 태그로 구성됩니다. 다음 예시에서 여는 태그 와 닫는 태그 활용 예시를 살펴볼 수 있습니다. 콘텐츠는 각 여는 태그와 닫는 태그 사이에 작성합니다. Hello, World! , img,
HTML 역사, HTML 5가 되기까지 무슨 일이 있었던 걸까요?
HTML은 하이퍼링크를 통해 문서들을 전자적으로 연결하기 위한 방식으로 처음 만들어졌습니다. 당시는 1990년대 초반이었는데요. 컴퓨터 과학자들은 다양한 논문 자료들의 목록을 관리하기 위해 인터넷을 사용하고 있었습니다. 그러나 오늘날에는 당연시 되는 하이퍼텍스트를 사용한 링크의 개념이 당시에는 존재하지 않았는데요. 즉, 이 글을 읽다가 이전 글로 이동하게 되는 개념이 없었던 것이죠. 과학자들에게는(?) 스타일링이니 폰트니 그런 것들은 중요하지 않았고, 그저 멋진 다른 논문을 빠르게 읽기 위한 방법이 필요했습니다. 이러한 문서들을 빠르게 연결하기 위해 HTML이 처음 등장하게 되었습니다. 그러다 1993년 모자익(Mosaic)이라는 회사가 '인터넷에서 재미없는 논문말고 사진도 좀 보여주고 해야지 않겠냐'하..
HTML이란? HTML 뜻 설명 ✔️
HTML은 HyperText Markup Language을 뜻합니다. 어떤 의미일까요? 용어를 하나씩 살펴보도록 하겠습니다. 하이퍼텍스트 먼저, 하이퍼텍스트(HyperText)입니다. 하이퍼텍스트는 링크를 통해 한 문서에서 다른 문서로 이동할 수 있는 텍스트입니다. 하이퍼는 초(超)라는 의미를 갖고 있죠. 여러분이 어떻게 지금 이 웹페이지에 방문할 수 있었을까요? 바로 하이퍼텍스트를 통해서 입니다. 검색 또는 우연한 기회로 이곳으로 이동하는 링크가 걸린 텍스트를 클릭한 것입니다. 이처럼 여러 HTML 문서들은 하이퍼텍스트를 통해 서로에게 연결됩니다. 마크업 다음으로 마크업(Markup)입니다. 마크업은 텍스트(콘텐츠)가 표시되는 방법을 의미합니다. 쉽게 이해가 안 될 수도 있지만, 예를 살펴보면 간단합니..
관계와 명암 ⏐ 일상 에세이 ⏐ 35
어둠 속에서 한 줄기 빛을 알아채는 건 무척 간단한 일이다. 그러나 밝은 햇살 아래에서 한 줄기 빛을 알아채는 건 쉽지 않은 일이다. 관계는 명암의 상대적 관계와 같이 상호적이다. 세상에는 완전히 흰 것도 없고, 완전히 검은 것도 없듯이, 관계에도 완전한 어둠과 빛은 존재하지 않는다. 우리는 어두운 시절을 지날 때, 한 줄기 빛이 되는 누군가를 만나기도 하고, 빛이 되는 존재들에 둘러 쌓인 밝은 나날을 보내기도 한다. 하루를 밝히는 태양보다 밤 하늘의 별들을 더 오래 기억하게 되는 이유는 우리가 밝은 빛에 하루 종일 둘러 쌓여 있었기 때문이다. 그 사실을 인지하는 사람은 많지 않다.
[프리랜서 일지] 6. 이번 달엔 무엇을 했을까?
2021년 4월이 지났다. 다음과 같은 것들을 했다. 쇼핑몰 런칭 준비 새로운 블로그 마케팅 및 세일즈 사진 촬영과 영어, 개발 공부 그리고 번역 간략한 후기들을 남겨본다. 먼저, 쇼핑몰 런칭은 생각보다 쉽지 않았다. 현재 웹사이트는 거의 만든 상태이고, 마지막 홍보와 마케팅이 남았는데 친구와 둘이서 이 모든 걸 해낸다는 게 버겁기도 하다. 과연, 물건이 얼마나 잘 팔릴 수 있을까? 어서 시장의 반응을 보고 싶다. 새로운 블로그에서 마케팅과 세일즈를 하고 있다. 생각보다 잘 풀려서 꽤나 괜찮은 수익을 내고 있다. 새롭게 알아가는 지식들을 정리하는 곳이라 나 또한 글을 작성하며 많이 배우고, 또 이를 공유하며 수익도 창출할 수 있다니 좋은 거 같다. 프리랜서의 장점이자 단점은 결과에 대한 보상에 하한선과 ..
[프리랜서 일지] 5. 프로젝트 100 후기: 습관과 꾸준함의 힘
요즘 나는 매일 세 가지 일을 얼굴도 모르는 이들과 함께 하는 온라인 습관 만들기 프로젝트에 참여하고 있다. 카카오에서 제공하는 이라는 플랫폼을 통해서인데, 참여자들은 각 프로젝트마다 1만원의 예치금을 지불하고 참여권을 얻는다. 이후, 100일 간의 목표 달성 시 1만원를 다시 돌려 받고, 그렇지 못할 경우 카카오가 이를 실제 기부금으로 활용하게 되는 방식의 프로젝트다. 그렇게 내가 3만원을 내고 가입한 모임은 1. 사진으로 하루를 기록하고, 2. 매일 영어 원서를 필사하고, 3. 개발을 공부하는 모임이다. 시작한지 10일 차에 접어든 오늘까지 하루도 빠지지 않고 인증을 마쳤는데, 이 짧고도 긴 기간 동안 습관을 만드는 일이 얼마나 쉽지 않은지를, 그래서 한 번 만들어진 습관은 얼마나 강력한 것인지를 몸..
서버 사이드 렌더링과 클라이언트 사이드 렌더링이란 무엇인가요?
서버 사이드 렌더링은 서버에 HTML 파일을 저장해두었다가, 요청이 발생할 때 모든 파일을 브라우저에 전달하는 방식으로 SEO, 인덱싱, 크롤링에 최적화되어 있습니다. 반면, 클라이언트 사이드 렌더링은 서버에서 HTML 파일을 처리하지 않고, 브라우저의 자바스크립트를 통해 상호작용하는 방식입니다. 클라이언트 사이드 렌더링은 초기 로딩 이후 서버 사이드 렌더링에 비해 빠르다는 장점이 있습니다. 서버 사이드 렌더링(SSR): 클라이언트 사이드 또는 유니버셜 앱 HTML을 서버를 통해 렌더링 클라이언트 사이드 렌더링: 주로 DOM을 사용하여 브라우저에서 렌더링 서버 사이드 렌더링 설명 서버 사이드 렌더링은 정보를 화면에 표시하는 가장 일반적인 방법입니다. 이는 서버 내 HTML 파일을 변환하여 브라우저에서 출..
