요소에 CSS 의 속성 값을 적용할 때 만약 2개 이상의 CSS 의 속성 값이 같은 요소를 가리키는 경우 어떤 CSS 속성 값을 우선 적용하게 될까? 이 때 적용되는 기준이 바로 'CSS Specificity(CSS 특이성)' 이다. 우선순위가 높은 특이성을 가진 CSS 에 작성된 속성이 HTML 요소에 적용된다고 한다. 오늘은 이 CSS Specificity 에 대해 알아보자. 1. CSS Specificity  HTML 문서 작성시 문서내의 요소를 2개 이상의 CSS 속성이 가리키는 경우가 생기거나 더러있다. 이럴 경우 어떤 CSS  속성을 기준으로 요소에 속성 값이 적용될까? 이럴 때 어떤 CSS 의 속성을 요소에 적용할지 결정하는 기준(점수,등급)이 CSS Specificity 이다. 1-1. 상..

'fetch' 는 엄밀히 말해 'Javascript' 의 메서드이지만 HTML 문서에서 외부의 리소스를 가져올 때 사용하게 되므로 일단은 'HTML' 카테고리에 정리해 보았다. 1. function '함수' 를 정의할 때 사용되는 키워드 Javascript 에서 함수를 정의할 때는 'function' 키워드와 함수명, 소괄호가 필요하다!Java 의 경우 '접근제어 반환타입 함수명(파라미터) { 함수 수행 코드};' 라면 Javascript 에서는 'function 함수명(파라미터) { 함수 수행 코드 };' 인 것이다.'function 의 실행 코드는 누군가(?) 해당 함수를 호출하면 수행된다.Javascript 의 기능이므로 HTML 문서내 서버에서 리소스를 가져오는 프로세스를 수행 HTML 문서 외부..

CSS 란 'Cascading Style Sheets(계단식 스타일 시트)' 의 약어로 다양한 정의가 있겠지만 한 마디로 화면을 꾸며주는 역할을 한다. 그래도 정확한 기능을 적어보자면 '여러 웹 페이지의 레이아웃을 한 번에 제어하여 많은 작업을 줄여준다' 고 한다. HTML 문서에 CSS 를 적용하는 방법은 3가지가 있다고 한다.Inline : HTML 요소(=태그) 내부의 style 속성을 사용. 이건 아마 태그별 속성을 사용해 특정 값을 지정하여 형태를 취하는 걸 말하는 것 같다.Internal : HTML 문서의 스타일 정보(=CSS) 를 정의하는데 사용되는 태그 꾸며야 한다? 그럼 영역의 너비(width)와 높이(height)를 지정할 때 사용 한 마디로 영역의 가로, 세로 길이를 지정하는 것!각..

당연하게도 HTML 에는 수 많은 태그(=요소)들이 존재한다. 이번에는 그 중에서도 학습을 하면서 사용해본 기본적인 태그들 중 , , 에 대해 알아보려 한다. 1. , , ... , 요것은 제목! - h1 요것은 부제목! - h2 이건 뭐라 부르지? - h6작성 내용의 제목(heading)을 나타내는 태그  태그류는 영역에 작성, 1부터 6까지의 넘버링을 갖는다.찾아본 내용들이 다 '제목' 이라는 표현을 사용하는데 나의 경우 'md(Markdown, 마크다운)' 에서 사용하는 '#' 과 비슷하다 느껴 텍스트의 중요도 표현이나 문서를 구분짓는 용도로 이해하였다., 의 경우 다른 일반 텍스트와 확연히 차이가 보여 자주 사용하겠지만 나머지 넘버들은 일반 텍스트보다 눈에 띄지도 않고 크기..

'VS code' 를 통해 'html' 문서를 작업할 때 'html:5' 를 입력하면 아래와 같은 기본 틀이 자동 구성된다. 하나하나 뜯어보자! 1. HTML5 - 기본 구성(틀)  1-1.  현재 문서가 'HTML5' 문서임을 정의'DOCTYPE' 이란 단어는 아마 'DOCUMENT TYPE(문서 타입)' 의 줄임말로 보인다. 1-2.  HTML 페이지(문서를 의미하는 듯)의 루트 요소(최상위)루트 요소인 만큼 한 HTML 페이지에 하나가 존재하는게 아닐까라는 생각을 해본다.해당 요소의 태그 안에 작성된 lang="en" 구문은 해당 요소에 포함되는 모든 기본언어를 영어로 지정하겠다는 의미이다. 예시의 경우 루트 요소인 에 작성해 해당 페이지의 기본언어가 영어로 설정되었다.lang 속성 을 ..

※ 참고 : 해당 게시글은 각 언어의 함수 또는 기능을 세세하게 다루지 않았습니다. 실습에 사용한 내용을 정리한 글인 점을 알립니다.  HTML, CSS 그리고 Bootstrap 을 활용한 실습에서 구현한 내용을 정리하는 것이 목적이다. 실습 결과 이미지이다. 위와 같은 결과를 출력하기 위해 작성한 코드를 하나씩 뜯어보며 되짚어 보려한다. 아래는 실습에 사용한 코드이다. 나만의 추억 앨범 추억 저장하기 앨범 이미지 앨범 제목 앨범 내용 ..