Simple Is Best

이번 포스팅에서는 CSS 덮어쓰기에 대해서 알아보겠습니다. 스스로 짠 코드가 아닌 기존에 존재하는 코드들을 덮어쓰기 하려면 CSS에 적용되는 우선순위에 대해서 알아야 합니다. 우리가 이전에 [CSS selector]를 학습했던 내용들을 리마인드 하겠습니다. CSS Selector 1. tag에 대해서 적용 (tag명{}) p{ } 2. class에 대해서 적용 (.class명{}) .class{ } 3. id에 대해서 적용(#id명{}) #id명{ } CSS Selector 우선순위 (동일한 태그에 적용되었을때, 상충되는 값들을 어떻게 처리하는지?) 1. style(10000점) >>>>>>>> 2. id(100점) >>>>> 3. class(10점) >> 4. tag(1점) 중요! 스타일링을 위해서는 ..

오늘의 포스팅은 User의 Input을 받아들이는 태그에 대해 진행하겠습니다. ● : form 태그는 제출용을 위해서 사용하며 action 속성을 갖는다. 제출하면 해당 주소에 정보를 전달해 처리한다. (JS때 자세히!) ● : 속성이 굉장히 다양합니다. 또한 input 태그는 닫는 태그가 존재하지 않습니다. input의 속성 1. type : 역할은 생각하시는 그대로 입니다. 2. placeholder : 아래의 사진과 같이 사용자가 입력할 요소에 대한 힌트를 주는 음영처리된 글자입니다. 3. value : 실제로 들어가 있는 값을 지정 할 수 있습니다. 4. name : 기능개발을 위해서 input의 이름을 지정할 수 있습니다. 참고 [CSS Selector] input의 type들을 선택하여 동일한..

오늘은 Navigation Bar를 만들어 보겠습니다! Bootstrap 등을 활용하여 쉽게 제작이 가능하지만 HTML/CSS 를 활용하여 먼저 어떻게 만들어지는지 알아보겠습니다. NavBar 란? 무료 백과 사전, 위키피디아에서 내비게이션으로 이동검색으로 이동 네비게이션 바 (또는 네비게이션 시스템은 )는의 한 부분이다 그래픽 사용자 인터페이스 정보를 액세스하는 원조 방문자 의도. 탐색 모음은 파일 브라우저 , 웹 브라우저 및 일부 웹 사이트의 디자인 요소로 구현 됩니다. [1] 네 저도 무슨 소린지 모르겠습니다. 웹사이트 들어가면 상단에 나와있는 메뉴바를 Navbar라고 칭합니다. 지난번 [실습1-블로그 글목록] 만들기의 윗부분에 NavBar를 추가해보겠습니다. 오늘의 Target ☞ 사이트 상단에 ..

이전 포스팅에서는 HTML 태그 내에서 간단히 스타일링 하는 방법에 대해서 알아보았다. HTML 내의 style 속성을 활용하면 스타일링이 직관적이지 못하고 수정이 불편하다. 본 게시글에서는 CSS 파일을 활용하여 스타일링을 진행한다. 1. HTML 의 태그에 위의 코드를 추가한다. rel 속성 : 파일의 종류 href 속성 : css의 파일 경로 2. 이전 시간에 style 속성에서 적용했던 스타일들을 클래스를 작성해서 옮긴다. (CSS 파일 내) .profile { width: 10%; display:block; margin:auto; } 3. HTML 파일 내에 적용할 태그 내에 클래스 명을 붙여준다. 2번 과정에서 .을 갑자기 왜 붙이는 거지? HTML 태그를 선택하기 위해! CSS Selecto..