본문 바로가기

전체 글173

[CSS] Do it! HTML+CSS+자바스크립트 웹 표준의 정석 //복습문제 - 문제파일08\quiz-1.html(곰돌이) - CodeRecorder 더보기 이 곰돌이 사진에다가 1. 이미지 테두리에 1px 짜리 회색(#ccc) 실선을 그립니다. 2. border-radius 속성을 사용해서 사각형 테두리를 원형으로 바꿉니다. 3. box-shadow 속성을 사용해서 이미지 주변에 그림자 효과를 추가합니다 (가로 세로 5px ,흐림정도 30px , 번짐정도 2px , 그림자 색상 #000) 이렇게 하는 코드를 작성하게된다면 ? 이런 사진이 나옵니다. 과제 하면서 느낀점 1. 사진을 올릴땐 꼭 사이즈를 넣어줍시다 . 2. 사진이 짤릴수도 있으니 background - size : cover 로 잘 넣어줍시다 . 3. box-shadow : 순서를 꼭 외웁시다 2022. 10. 24.
[Html] 이클립스 절대경로 , 상대경로 사진 불러오기 (background : url(); ) - CodeRecorder 이클립스에서 , html 을 만들때 배경에다가 사진을 넣어야 할때가 있다 그럴땐 CSS 에서 background : url(); 을 사용해야 하는데 url 에 절대경로 , 또는 상대경로를 불러와야 한다 절대경로란 ? 그 파일이 있는 곳의 절대적인 위치이다 . 저 경로에 있는 bg.jpg 를 사용 하려고하려면 저 파일을 실행시켰을때 위치를 확인 해야된다 실질적으로 저 폴더를 가려면 ? wtpwebapps 가 루트 / 이게 되고 나머지는 그대로 쭉 /HtmlCssJavaScript/ch08/images/bg.jpg 이것을 URL() 괄호 안에 넣어주면된다 그게 바로 절대경로 그렇다면 상대경로는 ?? 어떻게 하는걸까 ? 현재 내가 html 을 작성하는 곳은 position-3.html 인데 ch08 바로 아래.. 2022. 10. 24.
[vscode] vscode 아이콘 꾸미기 플러그인(material icon theme) -CodeRecorder 너무 칙칙하지않나 .. 칙칙한거 바꾸기위해서 플러그인을 알아보는데 material icon theme 이라는 플러그인이 있었다 검색해서 가장 다운로드가 많은것을 클릭해서 설치를 해보니 처음과는 많이 달라져있는걸 확인 할수있다 ! 2022. 10. 24.
[vscode] 라이브 서버 플러그인 (live server plugin) - CodeRecorder vs 코드에 들어가서 플러그인 다운받는곳에 들어간다 ! 거기서 live server 를 검색하며 많은 검색결과가 나오는데 구름 모양의 다운로드 아이콘이 있는데 그 옆에 숫자가 가장 큰 걸 다운로드 받아준다 여기서 설치를 눌러주면 설치가 되고 html 코드에 들어가서 마우스 우측을 누르고 open with live server 를 누르면 ? 이렇게 잘 나오는것을 확인 할수있다 ! 2022. 10. 24.
[CSS] 포지션 속성 Position 정리 및 예제코드 (박스안에 박스 움직이기) - CodeRecorder position position은 문서 상에 요소를 배치하는 방법을 정의한다 ! position이 요소의 배치 방법을 결정하면 , top , bottom , right , left 가 최종 위치를 결정 하는 방식이다 . position : 난 이렇게 배치할꺼야 ! top : 윗면에서부터 얼만큼 떨어뜨릴꺼야 ; right : 오른쪽면에서부터 얼만큼 떨어뜨릴꺼야 ; bottom : 아랫쪽에서부터 얼만큼 떨어뜨릴꺼야 ; left : 왼쪽면에서부터 얼만큼 떨어뜨릴꺼야 ; 여기서 오프셋이란 ? 추가되는 움직임이다 , 추가적으로 값을 지정할수있다는 뜻이고 , 예를들어 top : 100px을 추가한다면 원래 가지고있던 위치에서 위로부터 아래로 100 px 움직인다는 뜻이다 . 이런 모습을 가진 도형을 만드려면 어떻게.. 2022. 10. 23.
[CSS] transform 속성 정리 및 예제코드 - CodeRecorder transform 속성은 선택자로 선택한 태그를 기준으로 변화 시키는 속성이다 이런 파란색 사각형에게 scale이라는 속성에 2 를 넣어주면 가로 , 세로 크기가 2배로 커지고 scaleX 는 x축만 대입한다는 뜻이고 가로만 2배로 커진것을 볼수있다 저 도형에 translate(45px) 이 속성값을 걸어준다면 원래 있던 회색자리에서 중앙의 점이 아래로 45px , 오른쪽으로 45px 옮겨진다 만약 이런 도형을 만들어야 한다면 ? 어떻게 해야될까 ? (부모의 크기 , 자식의크기가 바뀌어도 형태를 유지해야된다) 1. 맨처음에 이렇게 부모 자식관계를 만들어주고 2. bottom :0 에서 자기자신의 세로길이의 반을 더 빼준다 bottom: -100px; 3. 부모를 기준으로 left : 50% 을 해준다 !.. 2022. 10. 23.
[CSS] box-sizing : border - box 정리 - CodeRecorder box-sizing : border - box 는 뭘까 ? class 이름이 box 인 요소가 있을때 이 요소의 가로 길이는 (width 600) + (padding (20+20)) +( border (10+10)) 해서 총 600+40+20 = 660 이 된다 근데 여기에 box-sizing : border - box ; 이런 구문을 추가하게 된다면 처음에 줬던 width 600에 맞춰서 padding 과 , border값은 그대로인 상태에서 총 가로의 길이가 600 이된다 결론 : padding + border + width = 600 이 되는셈이다 // 그래서 이걸 어떻게 써야 할까 ? 여기에 container 안에 가로길이는 500이고 div 박스 하나당 가로길이가 100+2 = 102이인 박스가.. 2022. 10. 23.
[CSS] 박스 모델(width ,height ,margin , border , padding ) 정리 및 예제 코드 - CodeRecorder margin 속성은 요소의 네 방향 바깥 여백 영역을 설정합니다. /* 네 면 모두 적용 */ margin: 1em; margin: -3px; /* 세로방향 | 가로방향 */ margin: 5% auto; /* 위 | 가로방향 | 아래 */ margin: 1em auto 2em; /* 위 | 오른쪽 | 아래 | 왼쪽 */ margin: 2px 1em 0 auto; /* 전역 값 */ margin: inherit; margin: initial; margin: unset; border는 요소의 테두리를 설정합니다 /* 스타일 */ border: solid; /* 너비 | 스타일 */ border: 2px dotted; /* 스타일 | 색 */ border: outset #f33; /* 너비 | 스타일 | 색.. 2022. 10. 23.

티스토리툴바