본문 바로가기

프로그래밍/html&css

position absolute 가운데 정렬 position absolute 하게 되면 가운데 정렬이 되지 않아서 하지만 !! 아래의 공식을 따라보자 position: absolute; left:0 ;right:0; margin: 0 auto; (필요할 경우 이후에) margin-top: -38px;과 같은 세팅을 마무리해주면 된다 그러면 absolute 이지만 좌우 간격을 동일하게 맞추어 움직이게 되고화면 사이즈가 해당 element 의 사이즈보다 작아지게 되면 자동적으로 left : 0 이 되면서 element의 오른쪽 부터 잡아먹게 된다. 더보기
jquery#상단 스크롤#숨기기 오늘은 scroll에 따라 상단을 숨기는 법을 알아보겠습니다! 일단 기본적으로 (배경, 상단)을 만들어주고 jquery 를 적용하러 가볼게요! 가장먼저 아래와 같이 (배경,상단)을 만듭니다 카테고리 부분 이제 jqeury 를 닫는 태그 앞에 넣어주세요 자세한 내용은 주석에 포함하였습니다 더보기
html태그#총정리 HTML 태그 정리 h1,h2,b,ul,ol,li 안녕하세요 원써니 입니다! 오늘은 HTML을 이루고 있는 태그들에 대해서 정리해볼게요 모든 내용이 어쩌구 와 같이 쓰여져 있죠??! 이 때 와 같은 것들을 태그라고 부르고 쓰임새에 따라 와 같이 다양하게 씁니다HTML 문서에 가 있고 태그는 쓰임새에 따라 다양하게 쓴다수 많은 태그중에서 오늘 기초적으로 많이 쓰는 태그 몇 가지만 알아보고 갈게요~h1, h2, b, ul, ol, li 알아보기일단, 지난 시간에 배운 방식대로 아래와 같은 html 문서를 만들었을 때 브라우저는 enter키와 같은 것을 인식하지 못하고! 글자만 주르륵 표현이 됩니다h1, h2, h3, h4...h1이란 head1 이라 생각하시면 됩니다! '머리 글 첫째 ' 이므로 가장 크고 .. 더보기
css적용방법 3가지 #html 안녕하세요 원써니 입니다~ 지난 한 주는 잘 보내셨나요?? 지난 시간에는 간단한 html 태그를 알아보았는데요, 오늘은 태그를 활용하여 css를 주는 방법을 알아보겠습니다html태그에 css주기 html에 css 포함 방법 - 3가지1. Inline Styles 인라인 스타일 2. Internal Style Sheet 내부 스타일 시트 3. External Style Sheet 외부 스타일 시트html 문서에 다양한 미적 효과를 줄 수 있는 css! 적용 방법은 위와 같이 3가지로 분류할 수 있는데요, 하나씩 자세히 살펴보겠습니다 츌발!! !! !!1. Inline Styles 인라인 스타일다람쥐 쳇바퀴 을 입력하였을 때 결과물태그 안에 style=''을 담았더니 지정한 효과가 나타났네요.! 글자의 색이.. 더보기
html div 태그 총정리 HTML 태그 - 태그 이해하기! 안녕하세요 튜터 원써니 입니다 오늘은 div 태그에 대해서 알아보도록 하겠습니다지난 포스팅에서 간단한 태그들에 대해서 알아보고 css 적용하는 방법 3가지를 알아보았어요~ 간단하게 다시 한번 태그들의 속성을 살펴볼게요span, b, h1, p, ul, li 태그만 적용했을 때태그만 다르게 적용했을 뿐인데! 각 각 다른 속성을 지니고 있음을 확인할 수 있습니다 즉, 태그는 그 역할에 따라 각자 다른 css 를 지니고 있습니다 각 태그에 border 속성을 준 모습태그들에 테두리 border를 주니 각자 어떤 크기를 지니고 있는지 보이네요! 어떤 태그는 한 줄을 다 차지하고 어떤 태그는 텍스트를 포함하는 최소 너비를 지니기도 합니다 이제 div 태그는 어떤 모습일지 살펴볼까.. 더보기
css적용하기#id#class 안녕하세요 튜터 원써니 입니다 오늘 다룰 내용은아이디 와 클래스 id 와 class 차이점 알기 먼저 ! 지난 주 복습부터 하고 갈게요~ html 태그 한눈에 정리하기span, b 태그는 문자열의 길이만큼만 너비를 갖게 되고요 h1,h2,p,ul,li,div 등은 부모 태그의 (자기가 들어가있는 상위 박스태그 ex.body) 너비를 물려받게 됩니다 그 외에도 각 태그의 기능에 맞게 폰트 사이즈나 들여쓰기 정도, 행간 등에 차이 있지요!클래스 적용해보기, class적용그렇다면 이제 클래스를 직접 적용해볼까요?? 클래스 적용 방법1. html에서 태그에 클래스 적용클래스는 일단, html 태그 안에 class="클래스명" 과 같은 형식으로 지정해주시면 됩니다 예를 들자면 사과 라는 태그에 apple 이라는 .. 더보기
div태그#class#id#css적용하기 안녕하세요 튜터 원써니 입니다지지난 시간에는 div태그를 알아보았고 지난 시간에는 class와 id의 개념을 알아보았습니다 오늘은 div 활용 방법 을 박살내러 가볼게요!!!div 태그 - class 와 id 로 활용하기 div 태그는class 와 id아무것도 없는 박스 (높이는 0, 너비는 부모와 같음)어떤 태그의 이름이자 별명; css 속성을 정의하여 쓰는데 활용아래의 이미지와 같은 html 문서를 div와 class를 활용해서 만들어볼게요 ▼ body{font-family:"맑은 고딕";} .cont{width:500px;margin:0 auto;} .title{background-color:#f6f6f6;text-align:center;} .box1{padding:10px; text-align:c.. 더보기
jqeury#date picker#달력포함하기 date-picker 를 적용하는 법을 알아보겠습니다 일단 date picker란?? 날짜를 선택할 때 input 타입[text]와 함께 img 버튼, 달력을 제공하는 겁니다! 편리하게 날짜를 선택할 수 있고 보기에도 좋지요 이때 사용하는 언어는 jqeury를 함께 써주시면 되세요 보통 date picker 라고 구글에 검색하면 많은 자료들이 나오는데요 적용하려고 하면 여간 귀찮은게 아닙니다.... ㅠ 막상 가져다 쓰려고 하면 잘 작동하지 않거나 하기도 하구요 더보기
background-image#배경이미지#htmlcss background-image를 설정하기background-image와 관련된 속성 안녕하세요 튜터 원써니 입니다~ 오늘은 css 속성중에서 배경이미지 설정 하는 법을 알아볼게요!튜터 원써니랑 GOGO!!! background-image / 배경 이미지 / css 지정하기apple_box 를 준비해주세여 커다랗게 900px * 500px 정도로 div{border:1px solid black;} .apple_box{ width:900px;height:500px; } 이제 배경이미지를 css에 정의합니다.apple_box{ width:900px;height:500px; background-image:url(apple.png); }느아닛...!! !>!> ! @@# ㅠ;;1! 사과 하나만 배경에 놓고 싶었는.. 더보기

티스토리툴바