코딩 121
[vs code] 비주얼 스튜디오 코드 아이콘으로 새파일 만들기
아이콘을 이용해서 새파일을 만들어볼거에요. 1. 폴더 생성 ① 폴더 - 먼저 작업을 위한 폴더를 하나 생성해주세요. - 왼쪽 탐색기에서 보인다면 오케이입니다. - 탐색기가 보이지않는다면 더 왼쪽에 있는 종이가 겹쳐진 아이콘이 보이시나요? 맨 위에있는거요. 그걸 눌러주세요. 2. 새파일 만들기 ① 마우스 올리기 - 폴더 이름에 마우스를 올려보겠습니다. - 폴더 이름 오른쪽으로 여러개의 아이콘이 나타나는게 보이시나요? - 여기서 맨 첫번째에 있는 아이콘을 클릭해줍니다. 이렇게 새 파일이라고 이름도 뜹니다. ② 파일 이름 정하기 - 아이콘을 클릭하면 이렇게 파일 이름을 적을 수 있는 칸이 나타납니다. - 여기에 파일명을 적어주시는데 주의할점은 확장자명도 같이 적어주셔야하는 것입니다. - 확장자가 뭔가요? 점 ..
[css] 미디어쿼리 max-width 사용시 주의점
지난 포스팅에 이어서 max-width에 대해 주의해야 할 점을 몇 가지 적어보겠습니다. 1. 적용 영역 ① 최댓값 - 미디어쿼리에서 max-width를 설정한다는 것은 0부터 설정값까지 적용을 시키겠다고 하는것입니다. - 위 이미지의 값은 브라우저의 사이즈가 0~800px 일 때 적용한다는 뜻과 같습니다. - 결국 브라우저 사이즈가 1200px 일 때는 적용되지 않으니 이런 효과를 이용해 반응형 웹을 만드는 것입니다. 2. 겹치는 영역 ① 순서 - 이번엔 코드로 살펴봅시다. 설명대로라면 0~1000px 적용, 0~600px 적용되는 미디어 쿼리가 두 개 있죠. - 그런데 0~600px 영역은 겹치는 영역입니다. - 이럴 때는 아래에 있는 코드가 적용됨으로 작은 영역을 아래에 적어주시면 됩니다. 3. 기..
[css] 미디어쿼리로 반응형웹 제작하기
css에서 미디어 쿼리를 이용해 반응형 웹을 제어해볼게요. 1. html 반응형 ① html - 일단은 간단하게 html을 작성해봤어요. - 예시로 사용할 거라 간단하게 하나만 만들었습니다. - [! + Tab]을 누르면 html 기본 구조를 간단하게 불러올 수 있습니다. 자세한 사항은 아래에 링크로 달아둘게요. 2. pc 사이즈 css *{ margin:0; padding:0; } .reactive{ width:100%; height:300px; background:lightcoral; text-align: center; line-height: 300px; font-size: 24px; color:white; } ① 기본 css - pc 사이즈는 그냥 평소대로 코딩을 해줍니다. - 저는 보기 좋게 간단..
[PHP] php 설치하기 (윈도우)
오늘은 php를 설치해보겠습니다. 1. bitnami bitnami.com/stack/wamp WAMP Bitnami WAMP Stack provides a complete, fully-integrated and ready to run WAMP development environment. In addition to PHP, MySQL and Apache, it includes FastCGI, OpenSSL, phpMyAdmin, ModSecurity, SQLite, ImageMagick, xDebug, Xcache, OpenLDAP, ModSecurity, bitnami.com ① WAMP bitnami WAMP를 검색하시거나 위의 주소로 접속해주세요. 위의 이미지처럼 WAMP가 적혀있다면 잘 찾아오신 ..
[강의] 스파르타코딩클럽 무료 코딩 강좌
무료 코딩 수업을 하나 소개해드립니다. 1. 스파르타코딩클럽 spartacodingclub.kr/family 가정의 달 무료특강 이벤트 투표만 해도 경품이! 총 500만 원 주인공 되자! spartacodingclub.kr ① 무료 수업 이벤트 스파르타코딩클럽에서 가정의 달을 맞아 무료특강 이벤트를 진행 중이에요. 특강과 더불어 이벤트도 진행 중인듯합니다. 2. 무료 수업 신청 ① 무료 수업 참여하기 특강 신청 기간은 5월 19일까지니 날짜를 유의해주세요. 이벤트 페이지 내에 있는 노란색 버튼인 '무료 수강하고 이벤트 참여하기'를 눌러 참여하시거나 맨 아래에서 계속 따라오고 있는 '무료로 코딩 수업 듣고 전시 참여하기' 버튼을 눌러주세요. ② 수강 신청 강의에 대한 자세한 설명 페이지가 나오면서, 오른쪽..