엄청 과거 이야기/CSS 강좌
[CSS]CSS로 드롭다운 메뉴를 제작하자!! 1탄
CSS로 드롭다운 메뉴를 제작하겠습니다.이 드롭다운 메뉴 제작 강좌는 총 3탄까지 있을겁니다. 1탄 : 1차메뉴만.2탄 : 2차메뉴까지3탄 : CSS로 애니메이션을 넣어서 메뉴 만들기 자 이렇게 총 3탄에 걸쳐서 제작될 강좌 입니다. 일단 시작하기 앞서서 잘봤다는 댓글 한번씩 부탁드려요~~!이번 강좌에서는 Brackets 라는 프로그램을 이용합니다. 처음으로 html 소스를 작성해 봅시다. 이런식으로 작성을 하면 아래 사진과같은 결과가 나옵니다. 이렇게 동그란 점과 함께 Text1 ~ Text4 까지 출력이 됩니다. 이제 여기에 css소스를 적용시켜 보겠습니다. 저같은 경우는 html소스 안에 태그를 사용하지 않으며, 외부파일을 무조껀 불러오기때문에 style.css파일을 따로 만들어서 소스를 입혔습니다..
[CSS] display! 디스플레이! 디~~스! 플레이!
디이이ㅣ이이이ㅣ즈즈즈ㅡ으으으프르르르르르레에ㅔ에에이이ㅣ이이ㅣㅣㅣ 안녕하세요 웹 프론트 개발자 Dev.Aura - 현 17세 입니다 꺄르르ㅡ르르륵 검정고시 준비중이라 강좌를 못썻네요 8월 3일 시험입니다 ㅎㅎ.... 쨋든 강좌 시작합니다이잉 오늘은 display를 해 볼거에요! display를 이용하면 이런걸 만들 수 있쬬! 꺄르륵 뭐 여기에는 postion이며 별게 다 들어갑니다. 오늘 이 디스플레이 강좌를 해보고 다음은 이런 드롭다운 메뉴를 만들어 볼거에요 !! 좀 정신이 없죠? 죄송해요 오랜만에 강좌를 싸지르는 중이라.. 자 먼저 display의 값들을 모두 봐봅시다. inline , block , none , inline-block 오늘은 이 display에 사용할 수 있는것들에 대한 설명만 하고 마..
[CSS] z-index 2-2 ( 외국문서 )
안녕하세요 맥북사고 기분좋아서 미쳐 날뛰는중인 17살 웹개발자 dev.Aura 입니다. 저번시간에 z-index에 대해서 약간 알고 넘어왔는데요, 알고보니 z-index가 꾀 많은양의 내용이 있더라구요..제가 머리에 다 넣고 이해하기쉽게 설명해드리기는 제 실력이 너무 딸려버리므로.. 외국 문서를 한국어로 해석하여서 작성하겠습니다. 출처는 이미지에 담겨져 있습니다. 즉시 분명하지 않을 수 있지만, HTML 문서 내의 요소가 입체적으로 생성된다. X 축 및 Y- 축에 정렬되고 게다가, 요소는 제 차원에서의 위치를 제어하는 Z 축에 놓여있다. 이러한 마진, 플로트, 오프셋 속성과 같은 속성이 요소는 x 축과 y 축 축에 앉는 방법을 제어합니다. Z- 색인 속성은 전적으로 요소가이 z 축에 배치되는 방법..
[CSS] 위치를 지정하자! position , z-index 2-1
자 오늘은 position에대해서 배울겁니다아 잘 보세요 ! 들어가기에 앞서서 말씀드립니다.궁금한거는 무조건 댓글로 물어보세요!모르는건 부끄러운게 아닙니다. 모르는걸 아는체하는게 부끄러운거죠. position 속성에대해서 알아보겟습니다.position을 사용하는 방법은 position:relative; position:absolute; position:fixed; position:static; 이렇게 총 4가지가 있습니다.그치만 저는 주로 relative, absolute, fixed 를 주로 사용합니다. 왜냐하면 이 3가지로도 충분히 구연이 가능하기때문입니다. 1. relative - 상대지정 relative는 상대지정입니다.즉, 브라우저의 꼭지점이 기준이 아니라 body안에 div를 만들었을때 div..
[CSS] width, height, margin, padding 기초를 튼튼히 !
안녕하세요 Aura 입니다. 바로 강의들어가죠, 1. width width 가 무엇인가..순간적으로 기억 안나는분이 있을겁니다. width는 이 캡처본에서 나왔듯이 " 폭,너비 " 를 말합니다.css에서 width값을주는것은 너비값을준다. 라고 말할수잇죠.그리고 저번 강좌에서 말한id와 class 중 id를 이용하여서 설명하겟습니다. #test{ width:100px; } width에는 px,em,pt,vmin,vmax 등이 들어갑니다.저는 대부분 px와 em을 많이사용하죠. 여담은 그만하고 width:100px; 라고 했는데어렵게 생각하실거 없습니다.그냥 너비를 100px로 지정해주엇다고 생각하면됩니다. 참쉽죠? 2. height height도 순간적으로 기억못하는분이 있으실거같은데 ! 이것도 준비햇죠..
[CSS] id와 class
자 여러분 여러분에게 아주 기가막히고 코가막힌 css를 알려드리겟습니다. 어떤사람은 css 그거 쉽지 이럴꺼고 어떤사람은 css 으.. 복잡해 이럴 텐껀데 제가 알려주는건 존나쉽습니다. 조 ~00 온나 본론으로 들어가겠습니다. 먼저 CSS를 하려면 1. id - # 2. class - . 이정도는 기본으로 숙지해놓으셔야 합니다. 이제 html 코드와 css 코드를 같이 겸해서 보여드릴겁니다. - id - HTML CSS #test{ } - class - HTML CSS .test{ } 이정도의 예시면 다들 이해하셧나요?? HTML에서 id="test" 라고 주었으면 CSS에서는 #test 라고 한뒤에 소스를 작성해야합니다. class도 위와 동일한 방법입니다. 또 id와 class를 안주고도 주는방법이 ..