개발자 권군

linear-gradient : 선형 그라디언트 , css로 그라데이션 효과 적용 1. 그라디언트 - 방향 to bottom to top to left to right > bottom, top, left, right 방향 div 만든다. 2. css background: linear-gradient ( direction, color(start), color(end) ); .grad_bottom{background: linear-gradient(to bottom,red,blue);} .grad_top{background: linear-gradient(to top,red,blue);} .grad_left{background: linear-gradient(to left,red,blue);} .grad_righ..

0. 로그인창 옵션 >> 전에 포스팅했던 무신사 로그인 창 옵션 부분을 가상요소를 이용해서 다시 만들어보았습니다. 1. html 회원 가입 아이디 찾기 비밀번호 찾기 > util_menu 클래스를 만들어 옵션 넣어줌. 2. css (전체 코드는 아래에 따로) .util_menu{ width: 450px; height: 50px; background: #f1f1f1 } > .util_menu 가로,세로를 지정하여 만들기 시작 .util_menu>ul>li{ float: left; margin-left: 30px; position: relative; } > li- float: left;를 주어 가로로 배치한다. position: relative; 준 이유- bar를 가상요소로 주었을 때 li를 기준으로 ba..

css 가상요소: 태그 대신에 가상으로 꾸밈을 추가 1. ::after, ::before 이용해서 태그 앞,뒤에 글 추가 front-end h3::before{content: "Hi ";color: rgb(39, 114, 124);font-size: 25px;} h3::after{content: " developer!";color: palevioletred;font-size: 30px;} > content 속성을 이용해 글,문자 등을 추가할 수 있다. 2. 인용부호 사용 html css p::before{content: open-quote;} p::after{content: close-quote;} > 인용부호를 p태그 before, after에 추가 (다음 포스팅: 가상요소를 이용해서 '바'를 추가)

이미지 스프라이트(Image Sprite) : 여러 이미지를 하나의 이미지 파일에 저장 이것을 css를 통해 좌표를 이용해 각각의 이미지로 쓰는 기법 >> 하나의 이미지 파일 안에 4개의 아이콘이 있다. 1. 화살표 방향대로 up,down,right,left 4개의 class 2. css - background 이미지 불러오기 up,.down,.left,.right{background: url(../images/image_sprites.png);} 3. 각각 아이콘마다 크기, 좌표 알아내기 - 그림판에서 이미지 위에 마우스를 움직여 보면 아래에 좌표가 뜬다. - 이 좌표를 보고 가로,세로 크기와 아이콘들의 좌표를 지정한다. 4. css에서 지정하기 .up{width: 21px;height: 20px;ba..

1. form 태그 : 입력 필드 전체를 감싸는 태그 -action : 데이터를 서버로 보낼 때 해당 데이터가 도착할 URL -method: GET,POST방식이 존재함. (아직 잘모른다) 2. label 태그 : input태그로 된 입력창을 설명하는 태그 아이디 비밀번호 -label의 for값과 input의 id 값이 같으면 연결됨. ? 의문 id와 name의 차이는 무엇일까?

input 태그 - 입력창, 버튼 만들 수 있다. 1. 정말 간단한 로그인 폼 만들기 아이디: 비밀번호: 로그인 폼을 간단하게 만들 수 있다. 2. placeholder 속성 아이디: 비밀번호: >> placeholder 속성: 입력 필드에 사용자가 입력할 데이터에 대해 힌트를 줌. 3. reset 속성 입력한 값을 모두 초기화 할 수 있다. 아이디: 비밀번호: 4. value 속성 - input요소의 초깃값 지정(type에 따라 다름) - "text", "password" : 입력 필드의 초깃값을 정의 - "checkbox", "image", "radio" : 해당 입력 필드 선택 시 서버로 제출되는 값을 정의 - "button", "reset", "submit" : 버튼 내의 텍스트 정의 5. max..

1. html 로그인 자동로그인 회원 가입아이디 찾기비밀번호 찾기 2. css *{ margin: 0; padding: 0; box-sizing: border-box; } #wrap{ width: 400px; height: 900px; margin-left: 50px; } #wrap>#login_area{ width: 400px; height: 400px; padding-top: 50px; } #wrap>#login_area>#login_header{ padding-left: 70px; padding-bottom: 50px; } #wrap>#login_area>form{ padding-left: 25px; } #wrap>#login_area>form>input{ width: 330px; height: 5..

1. audio 태그 속성 - controls : 컨트롤러 표시 속성 - autoplay : 자동재생 기능 (크롬에서 자동재생 기능 지원안함. 엣지는 지원함.) > 이렇게 짜도 똑같이 나온다. 2. video 태그 속성 - width, height 지정 가능 type도 지정 가능 (유튜브 영상을 다운로드 하는 법은 따로 포스팅) >> 고기남자 유튜브 영상을 다운받아 곰믹스로 편집해서 넣어줌. 3. embed 태그 -mp3,wmv,swf -영상,음악 모두 가능

1. :first-child 리스트1 리스트2 리스트3 리스트4 리스트 4개를 생성. 여기다 실습을 해보겠다. ul{list-style-type: none;} ul>li{ width: 100px;height: 100px;} ul>li:first-child{background: red;} ul의 하위요소 li의 first-child에 background를 red로 적용. :first-child >> 반드시 하위 요소가 첫번째에 있어야 한다. 리스트1위에 새로운 div를 생성한다면,, div1 리스트1 리스트2 리스트3 리스트4 >>이렇게 li가 첫번째가 아니라 div이기 때문에 :first-child가 적용 안됨. 2. :first-of-type div가 존재하는 상태에서 리스트1에 색을 넣으려면 :fir..

1. block 속성 box1 box2 div의 default 속성은 block block 속성: 가로,세로 크기 지정가능 나란히 배치 X , 밑으로 내려간다. #box1{ width: 100px; height: 100px;background: rgb(151, 151, 241);} #box2{ width: 100px; height: 100px; background: rgb(248, 178, 178);} 2. inline 속성 위 css코드에서 diplay: inline; 을 box에 추가하여 div를 inline속성을 바꾼다. inline 속성: 가로,세로 크기 지정불가능 나란히 배치 O , 가로로 배치 #box1{ width: 100px; height: 100px;background: rgb(151, ..