본문 바로가기
CSS의 Margin/Padding 보호되어 있는 글입니다.
텍스트 속성의 CSS (두번째)(+문단 속성) letter-spacing - 글자 간격을 줄이거나 늘릴 수 있다. p { letter-spacing: 10px } line-height - 줄 높이를 정할 수 있다. p { line-height: 1.5 } p { line-height: 10px } text-align - 텍스트의 위치(왼쪽, 중간, 오른쪽)를 정할 수 있다. p { text-align: left; } p { text-align: center; } p { text-align: right; } text-decoration - 텍스트를 장식 할 수 있다. line-through: 텍스트 중간에 선이 그어져서 보인다. 취소선이라고도 한다. overline: 텍스트 밑줄 dashed: 텍스트 굵은 점선으로 밑줄 dotted: 텍스트 점선으로 ..
텍스트와 관련된 CSS font-family - 글씨체를 선택하는 속성 - 보통 어떤 사용자가 글씨체쓸지 가늠할 수 없기 때문에 사이트에 사용된 폰트는 앞에 두고, 혹시 사이트 지원에 안될 경우를 위해서 많이 사용되는 글씨체로 여러개 나열하여 둔다. p { font-family: "본고딕"; } font-size - 글씨를 크게도 할 수 있고 작게도 할수 있는 속성 - 보통 단위로 px가 일반적 많이 익숙하며, 사이트에 따라서는 em, rem, vh&vw, vmin & vmax, ex&eh까지 쓰는 사이트들도 있는데 기기나 브라우저마다 지원하는 형태도 다 다르니 확인하여 작성이 필요하다. p { font-size: 10px; } font-weight - 글씨를 두껍게도 얇게도 할 수 있는 속성 - 가장 일반적인 글씨 두께는 4..
CSS 간단 소개 css에 대한 간단 소개 css를 풀어쓰면 Cascading Style Sheets인데, 굳이 풀어쓴다면 연속적인 스타일 시트라고 할 수 있다. css를 쓰기 위해선 태그에서 태그나 class나 id를 가져와서 정의해주면 사용이 가능하다. p { text-align: center } .class { overflow: hidden } #id { display: block } 첫번째 p가 태그를 가져와서 스타일을 선언했고, 두번째가 class를 가져와서 선언해주었고, 마지막 id를 가져와서 스타일을 선언해주었다. css를 사용하기 위해서는 앞에 셀렉터로 p 그리고 .class, #id로 가져오고, 뒤에 괄호를 앞,뒤로 붙여서 앞에는 css 속성을 선언해주고 뒤에는 키값을 붙여주면 완성이 된다. html에서 ..
HTML5 - 시맨틱 태그 html5로 들어오면서 가장 크게 변한 점 중 하나가 시맨틱 태그를 도입했다는 점이다. 기존의 html은 레이아웃을 짜기 위해 주로 div를 많이 사용했고, 이런 div는 레이아웃을 단지 짜기 위한 공간을 마련할 뿐 어떤 의미론적인 태그도 부여받지 못한다. 시맨틱이란 말그대로 의미론적이라는 뜻이다. 결국은 시맨틱 태그는 의미론적인 태그라는 뜻인데, 이런 시맨틱 태그를 도입하면서 컴퓨터가 정보를 이해하고, 논리적인 추론까지 할 수 있는 구조를 할 수 있게 만들어졌다. 기존에는 header나 content나 footer를 줄 때, 이 부분은 헤더! 이 부분은 섹션! 이 부분은 푸터! 위의 div에 class나 id를 의미적으로 헤더,섹션,푸터를 부여해주면서 레이아웃을 나누곤 했는데 시맨틱 태그로 들어서면 아..
block 태그 vs inline 태그 inline 속성 - 태그가 글씨 써진 넓이만큼 먹는다. - width와 height / margin과 padding이 적용되지 않는다. - text와 관련된 css가 적용된다. - css로 block 요소를 만들 수 있다. *예외적으로 width와 height가 먹는 태그가 존재한다(입력관련 태그나 img 태그) 관련 대표적인 태그: block 속성 -한 줄을 전체 넓이로 간주한다. -width와 height / margin과 padding가 적용되어 지정할 수 있다. - css로 inline 요소를 만들 수 있다. 관련 대표적인 태그: , - inline-block 속성 -inline,block 속성을 합친게 inline-block이다. -width와 height 값을 줄 수 있으며, 지정해주지 않으..
HTML에서 많이 사용하는 태그2 - 텍스트 태그로, 개인적으로는 주로 p태그 안에 많이 넣는 편이다. 이 태그는 텍스트 태그입니다~ - 강조 태그로, 중요한 부분을 강조시키고 싶을 때 사용한다. 이 문장은 매우 중요합니다! - 다른 텍스트에 비해 강조시키고 싶은 부분이 있을때 많이 사용하는데 우리가 교과서를 읽다가도 중요한 부분이 있어서 노란색으로 색칠할 때가 있는데 그럴 때 사용하는 태그이다. 내용을 읽다보면 강조하고 싶은 부분이 생기죠? - 줄바꿈 태그이다. - 우리가 문장을 p태그 안에 넣었는데 중간에 줄바꿈하고 싶을 때 많이 사용한다. 오늘 다시 한 번 확인하는 날이다. 사람이 많아서 확인가능할지 모르겠다. - 우리가 다른 페이지나 다른 사이트로 넘어가고 싶을 때 많이 사용하는 태그이다. 네이버로 이동! - 페이지에 이미지를 게..
HTML에서 많이 사용하는 태그1 ~ - 제목 태그 - heading의 줄임말 -1~6으로 갈수록 크기가 작아진다. 제목 삽입 - 텍스트 태그로, 문장이나 문단을 주로 넣어주는 태그이다. 문장이나 문단 삽입 가능 , -목록을 만들기 위해 만드는 태그이다. - ol은 ordered list로 자동적으로 숫자가 붙어서 나오는 태그이다. - ul은 unordered list으로 자동적으로 동그라미가 붙어서 나오는 태그이다. - 보통은 아래와 같이 태그를 쓰며, li에는 실질적인 내용을 ul과 ol은 그런 li를 감싸준다. 사과 봉숭아 파이썬 자바 dl태그는 정의된 목록을 만드는 태그라 할 수 있다. ul이나 ol같이 dl 태그쓸 때는 dt,dd 태그가 필요하다. dt는 정의되는 용어의 제목을, dd는 정의되는 용의 제목의 설명을 넣어주면 된다..

티스토리툴바