Front-End/HTML , CSS (11) 썸네일형 리스트형 박스모델(box model) 브라우저 화면은 가로와 세로를 축으로 하는 2차원 공간이다. 브라우저를 통해 렌더링 되는 웹요소들 또한 그 안에서 개별적으로 너비와 높이를 가진다. 박스 모델은 너비와 높이를 가지는 개별요소를 가리켜 '박스'라 표현하고 , 박스를 네가지 세부 영역으로 나누어 구분한 일종의 디자인 모델이다. 바깥쪽 여백 : margin 경계선 : border 안쪽 여백 : padding 콘텐츠 영역 : width(가로) , height 크롬에서 개발자 도구(F12)를 열면 박스모델을 확인할 수 있다. 테두리 스타일 - 테두리는 화면 상에서 요소가 차지하고 있는 공간을 뚜렷하게 표시해 다른 요소와 쉽게 구분할 수 있는 영역 테두리 스타일을 정의할 때는 단축 속성인 border를 사용하거나 border의 하위 속성을 개별적으.. 선택자 유형 스타일 선언문의 선택자를 어떻게 입력하는가에 따라 스타일이 적용 될 요소가 결정된다. 요소는 하나만 선택할 수도 있고 , 여러 개를 동시에 선택할 수도 있다. CSS는 다음과 같이 여러가지 유형의 선택자를 지원한다. (사진출처 : 유노코딩) css는 선택자 우선순위가 있다. 순위가 같다면 , 가장 마지막에 쓴 놈이 점수별로 순위를 매겨보면 1. !improtant (측정불가) 2. Inline style 선언 (1000점) 3. ID 선택자(100점) 4. class 선택자 (10점) 5. Tag 선택자 (3점) 6. *(전체) 선택자 (1점) 상세히 적어줄 수록 좋다. p { color: blue !important; } importnat 쓰는 방법이다. CSS란 무엇인가? (CSS) 웹페이지를 꾸며주는 도구라고 보면 된다. CSS 약자부터 들어가겠다. Cascading : 폭포같은 , 계속되는 , 연속적인 Syle : 멋을 내다 Sheet : (종이나 문서) 한장. => 연속적으로 스타일을 정희하는 문서이다. CSS사용 방법은 다음과 같다. 내부 스타일 시트 (Internal Style Sheet) 외부 스타일 시트 (External Style Sheet) 인라인 스타일 (Inline Styles) 예를 살펴 보겠다. --------------------------------------- 내부 스타일 시트 (Internal Style Sheet) 문서 내에 head 태그 안에 사용하는 방법 /* CSS 스타일 정의 */ body { font-family: Arial, sans-ser.. meta(HTML) 내가 naver를 들어갈 때 , 컴퓨터 한개로만 네이버를 열지 않는다. 폰으로도 열고 태블릿으로도 열 수 있다. 네이버를 나만 쓰는가? 절대 아니지 이런 여러 환경에서도 쾌적하게 네이버를 쓰기 위해선 meta태그가 필요하다. meta - 어떤 데이터가 있으면 그 데이터를 설명하는 데이터 HTML에 있는 태그들은 그 태그가 감싸고 있는 컨텐츠를 설명한다는 점에서 걔네도 메타 데이터라고 할 수 있다. 가령 h1,p,div 이런 것들도 말이다. 이런 웹개발할 때 흔히 보이는, meta는 무엇일까? HTML 문서를 설명하는 데이터가 될 것이다. charset : 문자의 인고딩을 지정한다. name과 content : 여러 가지 목적으로 사용되며,'name' 속성에 따라 다양한 정보를 제공한다. 일부 'name'.. input(HTML) input태그는 웹페이지에서 사용자 입력을 받는 데 사용되며 , 다양한 타입(type)을 가질 수 있다. 각 타입은 특정한 종류의 입력을 나타내며, 다양한 형식의 데이터를 수집할 수 있도록 한다. 일반적으로 많이 쓰는 타입은 "text,password,email,number,checkbox,radio,submit,file" 등이 있고 필요할 때 갖다 쓰면 된다. DOCTYPE html> Document 아이디 비밀번호 남자 여자 당신의 취미는? 롤 자전거 기타등등 checkbox = 체크하는 박스 radio = 둥근 선택타입 radio 쓸 때 하나만 선택하고 싶다면 name값을 같게 해주면 된다. 남자 여자 이런 식으로 말이다. placeholder를 입력해주면 연한 회색글씨로 글자를 써넣을 수 있다... form , label(HTML) 은 입력 요소를 감싸며, 입력값을 서버측으로 제출(submit)할 수 있다. 태그 안에 여러 입력태그들을 포함시키면, 해당 입력 요소들은 양식의 개별 항목으로써 역할을 수행한다. 물론 단순히 폼 요소 안에 입력 요소를 포함한 것만으로는 서버에 입력 값을 전송할 수 없다. 태그가 역할을 수행할 수 있도록 다음 속성들을 사용하자. action : 입력값을 전송한 서버의 url 이다. (현재는 서버가 없어 임의로 지정해놓았다.) method : 클라이언트가 입력한 데이터를 어떤 식으로 전송할지(GET or POST) get은 서버에서 가져올게요. post는 서버에 요청 보낼게요! 라는 정도로 일단 넘어가자 아이디 비밀번호 코드를 보면 아이디에 "name 속성"을 넣었는데 이렇게 하면 서버에서 정보를 받을 때 .. ul , ol ,주석 사용방법(HTML) ul, ol은 리스트다. ul - 순서 없이 정렬 (unordered List) ol - 순서 있게 정렬 (Ordered List) 둘 다 ul 안이나 ol 안이나 li태그(자식)을 넣어주면 된다. ul 입니다 아시겠죠?! ol은 순서가 있답니다! --- 주석 사용방법 코드 치는 곳에 맥 : command + / window : ctrl + / 주석이 생긴다. 이건 컴퓨터가 읽지 못해서 필수사항이나 메모같은 걸 해도 좋다. Image삽입 , a태그(링크) 이미지 태그는 이렇게 생겼다. src 안에 url을 넣어주고 alt는 이미지가 로드가 실패했을 때 , 대체할 텍스트를 넣어주면 된다. 물론 이미지는 style 적용이 가능하다. a태그는 다른 페이지,전화번호,이메일 주소등 다양한 유형의 콘텐츠로 연결되는 링크 역할을 한다. 이때 href가 필요하다. 링크! 주의점은 https:// 이것도 잘써줘야한다는 것이다. 만약 새탭에서 열고 싶다면 링크! 뒤에 target="_blank"를 넣어주면 된다. 만약 보라색이 싫다면 css로 a:visited {color:black} 해주면 된다. 이미지출처 : 유노코딩님 이전 1 2 다음
