HTML7 script 태그의 async, defer 속성의 차이 HTML 태그 중 script 태그에는 async 속성과 defer. 이렇게 두 가지 속성이 있습니다. 이 두가지 속성은 어떤 특징이 있으며 두 가지 중 어떤 속성을 사용하는 것이 좋은지 알아보도록 할게요! async 속성 컴퓨터가 HTML 코드를 처음부터 읽어내려오다가 script 태그를 만나면 HTML을 읽는 것과 병렬로 위치하며 script 태그에 쓰인 파일을 다운로드합니다. 파일 다운로드가 완료되면 해당 파일(js)을 실행하게 되는데요. 이때, HTML을 읽는 것은 파일이 실행되는 동안 멈추게 됩니다. 그러고 파일 실행이 완료되면 다시 script 태그 아래의 나머지 HTML을 읽기 시작하게 되는 것이죠 😉 이렇게 script 태그에 async 속성을 사용했을 때 장점과 단점! 장점 : body .. 2020. 9. 6. script 태그의 위치는 어디가 좋을까? HTML의 script 태그를 어디에 위치시키는 것이 좋은지에 대해 알아보겠습니다. script 태그에는 보통 .js 같이 다운로드하여서 실행시킬 파일들을 적게 되는데요. 이 script 태그의 위치는 head 태그의 끝에 위치시키는 분들과 body 태그 끝에 위치시키시는 두 분류로 크게 나눌 수 있는데요. 이 차이에 대해 설명드릴게요 head 태그에 위치시켰을 경우 브라우저가 HTML 코드를 읽어내려오다가 script 태그를 만나게 되면, 해당 파일을 다운로드하고 실행시키기 위해 HTML을 읽어오는 과정을 잠깐 멈추게 됩니다. 그리고 해당파일을 모두 다운로드하고 실행을 시킨 이후에 다시 나머지 HTML 코드를 읽게 되는데요. 이렇게 할 경우 아래와 같은 단점이 생기게 됩니다. 단점 : script 파일.. 2020. 9. 6. [CSS] font-size, color 오늘은 CSS에서 font-size와 color 속성에 대해 알아볼 거예요 😊 font-size에 px만 있는줄 알았는데 em, rem 단위도 있었다니,, 그럼 우선 font-size의 px, rem, em 단위에 대해서 알아볼게요! px 모니터 상의 화소 하나의 크기에 대응되는 단위로 고정된 값이지만, 사용자가 글꼴의 크기를 조정할 수 없기 때문에 가급적 사용을 하지 않는 것이 좋다고 해요 rem html 태그의 폰트 크기에 따라서 상대적으로 크기가 결정되고 사용자가 웹 브라우저 상에서 폰트 사이즈를 변경하는 것에 따라 동일하게 변경되기 때문에 rem을 사용하는 것을 권장한다고 해요 em 부모 태그의 영향을 받는 상대적인 크기로 파악하기가 어렵다고 해요! rem이 등장하면서 이 단위 역시 사용이 권장되.. 2020. 8. 26. [HTML] img 태그 오늘은 HTML의 태그에 대해 알아볼게요 😃 img태그 ( ) HTML 문서에 image를 넣고싶을때 사용 태그는 태그 내부에 위치하며 src 속성에 "이미지가 들어있는 경로/이미지파일이름.확장자" 이렇게 작성해 주면 되는데요. 그림이 너무 커서 height(높이) 속성에 500이라고 지정해주어 사진을 줄였어요 (저는 img파일을 html 코드를 작성한 경로에 같이 넣어줘서 src 부분에 경로는 따로 표기하지 않았어요) 위와 같이 코드를 작성해주면 아래와 같은 웹브라우저 화면을 볼 수 있어요 (사진만 캡처해서 가운데에 나오는 것처럼 보이지만 기본 화면에서 왼쪽 정렬되어 나타납니다) 그리고 img태그의 속성 중 아래와 같이 alt와 title 속성이 있는데요 alt는 예를 들어 img파일 이름이 아래와 같.. 2020. 8. 12. [HTML] p, br 태그 오늘은 HTML 태그 중 가장 기본이 되는 p태그와 br태그에 대해 알아볼게요 😃 p태그 ( ) / br태그 ( ) p(paragraph)태그는 단락,문단,절 등을 구분할 때 사용합니다. br태그는 텍스트 내의 줄 바꿈(line-break)을 정의할 때 사용합니다. 예를 들어 설명하면, 우리가 html 코드에서 아래와 같이 엔터(Enter)로 줄과 단락을 구분한다 해도 웹 브라우저 화면에서는 이렇게 단락 구분 없이 쭉 나열돼요 😥 이제 HTML의 태그를 삽입해볼게요 줄 바꿈(엔터)를 하기위해 기존에 엔터를 치던 문장의 끝에 '내가 여기서 줄바꿈(엔터)를 하겠다!'라는 의미로 을 붙여주면 되구요 :) (참고로 태그는 빈(empty) 태그로 만 사용하면 되지만! XHTML의 경우에는 로 사용해야 한다고 해요.. 2020. 8. 12. HTML (HyperText Markup Language) HTML이란 HTML은 HyperText Markup Language의 약자로 일단 하나하나 뜯어볼게요! HyperText : 하이퍼텍스트를 기반으로 한 Markup : 마크업 형식을 가진 Language : 프로그래밍 언어 * 하이퍼텍스트 : 웹브라우저를 통해서 어떤 웹페이지를 볼 때 언제나 있는 것이 링크인데, 이 링크라고 하는 기능이 하이퍼텍스트. * Markup : 제목은 무엇인지, 주소는 어디에 있는지, 강조할 부분은 어디인지와 같이 문서를 구조적으로 표시하기 위한 것. 위의 요약해서 설명하면 HTML이란 하이퍼텍스트를 기반으로 한 마크업 형식의 프로그래밍 언어라고 할 수 있겠는데요 (말이 어렵죠,,,😶) 더욱 이해하기 쉽게 설명하자면 사람과 사람 사이에 오고 가는 말 중에 '창문 좀 열어주겠니.. 2020. 8. 3. [티스토리 Book club 스킨] 블로그이름 폰트 수정 Book Club 스킨이 마음에 들어서 적용을 했다. 적용을 하고 보니 아래의 '공감하는 개발자' 폰트가 맘에 들지 않았다. 그래서 아래와 같이 관리자모드에서 꾸미기 카테고리의 스킨 편집을 선택한 뒤 아래의 Html 편집을 누르자 그러면 아래와 같이 CSS 를 선택하여 편집을 할 수 있다. 스크롤을 조금 내리다보면 " /* Layout Selector */ "라는 주석이 나온다. 이 아래 부분의 font-family를 원하는 폰트로 설정해주면 된다. 나는 '나눔명조'라고 되어있던 것을 'Noto Sans KR', sans-serif 로 수정하여 다른 글꼴과 동일하게 맞춰주고 우측상단의 적용버튼을 눌러 적용을 해주었다. (참고로 CSS에 추가한 라인이 없다면 128번 라인에 font-family가 있으니 .. 2020. 6. 28. 이전 1 다음
