개인 공부용 블로그

먼저 HTML 세팅하면 아래와 같이 나온다. 해당 웹페이지가 어떤 언어로 만들어져 있는지 지정한다. 위 언어를 사용하는 이유는? 웹접근성 향상을 위해 필요하다. 문서에 txt가 있을 경우 시각 장애인이 페이지에 접근 했을 때 보조 수단을 통해 정보에 접근해야하기 때문에 (스크린리더기, 점자정보단말기 등) 주언어(lang="ko")가 명시되어 있으면 해당 언어에 알맞게 번역(점자, 소리)되어 올바른 해석으로 전달이 된다. 언어 코드의 대표 종류 한국어 ko 영어 en 일본어 ja 중국어 zh 가끔 웹페이지를 보다가 lang="en-US" 이렇게 되어 있는 사이트도 봤었는데 이건 뭔가해서 찾아봤는데 ... en : 언어코드 (소문자사용) US: 국가코드(대문자사용) 언어코드 http://www.w3bai.c..

시멘틱 태그로 사용되는 article, section article 독립적인 내용이 가능할때(흐름상의 별도의 내용) section 전체 주제/흐름과 연결될때 div 공간분할(주제와 연결되지 않음) article>section section>article article>article section>section 사용순서는 모두 잘못된 것은 아니다. 미묘하게 더 많이 사용되는 것은 section>article 을 더 많이 사용한다. *개인 공부 및 기록용으로 게시글을 발행하며, 오타나 문제가 있을 경우 댓글을 남겨주세요!

color: #000(블랙) 는 header, footer에는 많이 사용되지 않는다 (판독보다는 가독을 중시하므로 #222, #333. #666 등으로 사용) #000은 글자를 꾸며주고 싶을때 (제목, gnb, 본문의 부제목 등에 사용) *개인 공부 및 기록용으로 게시글을 발행하며, 오타나 문제가 있을 경우 댓글을 남겨주세요!

모바일에서 img태그를 이용해 이미지를 넣게 되면 편리하긴 하지만 반응형에서는 이미지가 짤리거나 찌그러져보이는 현상이 나타남. (모바일은 해상도에 따라 이미지를 교체해야 하므로) 값 auto : 배경 이미지의 원본 크기를 유지함 cover : 이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정. 이미지의 가로세로비가 요소와 다르면 이미지를 세로, 가로방향으로 잘라서 빈 공간이 생기지 않음 contain: 이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정 비율이 안맞는 잔여공간이 있을 경우 그 공간은 유지한다. background-size 자세한 내용(MDN) https://developer.mozilla.org/ko/docs/Web/CSS/background-size *개인 공부 및 기록용..

##1. display 속성 요소의 렌더링 박스 유형을 결정하는 속성 (기본값: 요소마다 상이함) none 요소가 렌더링 되지 않음 inline inline level 요소처럼 렌더링 block block level 요소처럼 렌더링 inline-block inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐 * height 나 width 등과 같은 박스모델 속성을 적용할 수 있다 그외에 list-item, flex, inline-flex, table, table-cell 등 다양한 속성 값 존재 inline level 요소 사이의 공백과 개행 처리: lnline 요소의 경우 공백과 개행에 대해서 하나의 여백으로 받아들임. 따라서 inline과 inline-block의 경..

##1. 타이포그래피 구조 모든 폰트는 em박스를 가지고 있고 위 같은 구조로 이루어져 있다. em 폰트의 전체 높이를 의미함 ex (=x-height) 해당 폰트의 영문 소문자 x의 높이를 의미함 Baseline 소문자 X를 기준으로 하단의 라인을 의미함 Descender 소문자에서 baseline 아래로 처지는 영역을 의미함. 서체에 따라 descender의 길이가 다름.(g, j, p, q, y) Asscender 소문자 X의 상단 라인 위로 넘어가는 영역을 의함. (b, d, h, l) ##2. Font-family font-family 글꼴을 지정하는 속성 family-name과 generic-family로 구성됨 family-name은 지정순서로 폰트의 우선순위를 결정함(한글 지원여부) gen..

Content 영역 요소의 실제 내용을 포함하는 영역입니다. 따라서 크기는 내용의 너비(width) 및 높이(height)를 나타냅니다. Border 영역 content 영역을 감싸는 테두리 선을 border라고 합니다. Padding 영역 content 영역과 테두리 사이의 여백을 padding이라고 합니다. content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향을 미칩니다. 이에 따라 padding을 content의 연장으로 볼 수도 있습니다. Margin 영역 border 바깥쪽의 영역을 margin이라고 합니다. border 영역을 다른 요소와 구별하기 위해 쓰이는 빈 영역입니다. 즉, 주변 요소와의 여백(간격)을 margin을 이용해 지정할 수 있습니다. ##1. Boder란..

1. 가상 클래스(pseudo class) 요소에 직접 클래스 입력하는 것이 아니라 브라우저 스스로 특정 상황이 되면 자동적으로 클래스를 적용시켜줌 :pseudo-class { property: value; } 가상클래스는 :(콜론)기호를 써서 나타낸다. 가상 클래스 이용시 CSS만으로 처리가 가능하므로 훨씬 효율적이다. 가상클래스 종류 https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes 2. 문서 구조와 관련된 가상 클래스 :first-child 첫번째 자식요소 선택 :last-child 마지막 자식요소 선택 HTML CSS JS 첫번째와 마지막에 가상 클래스 적용됨 실제에는 class속성이 없지만 내부적으로 가상 클래스가 적용되어 아래와 같이 ..

##문서 구조의 이해 HTML: Hyper Text Markup Language HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다. #1. 부모와 자식 부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나뿐입니다. 자식 요소는 부모 요소와 반대라고 생각하면 되며 자식 요소는 여러 개일 수도 있습니다. 의 부모 요소: ↔ 의 자식 요소: 의 부모 요소: ↔ 의 자식 요소: , 의 부모 요소: ↔ 의 자식 요소: 의 부모 요소: ↔ 의 자식 요소: 의 부모 요소: ↔ 의 자식 요소: , #2. 조상과 자손 조상과 자손의 관계는 부모와 자식의 관계와 비슷합니다. 정확히 얘기하면 부모와 자식의 관계를 포함한 확장된 관계라고 생각하면 됩니..

1. CSS란? Cascading style sheets의 약자로 HTML(마크업 언어)을 꾸며주는 언어 HTML는 웹페이지의 정보를 표현한다면, CSS는 HTML을 보기좋게 디자인해주는 역할 2. CSS문법 h1 { color: yellow; font-size:2em; } 선택자(selector) - "h1" 속성(property) - "color" HTML과 CSS의 속성은 상이함(한국어로 표현할때 둘다 속성이라고 하나 영문으로는 다름) HTML의 속성: Attribute CSS의 속성: property 값(value) - "yellow" 선언(declaration) - "color: yellow", "font-size: 2em" 선언부(declaration block) - "{ color: yell..