반응형 IT 프로그래밍/HTML,CSS,Javascript 간단 팁5 [HTML/CSS 간단 TIP] github에 올라와 있는 이미지 url로 내 웹사이트에 넣! 다운로드 (필요X) 결론! -> 원하는 이미지가 있는 github 페이지에 들어가기 -> raw 버튼 클릭 -> 나오는 이미지 화면 link 복사 -> -> 끝 원하는 이미지가 있는 github 페이지에 들어가기 Raw 위치 raw 버튼 클릭 나오는 이미지 화면 link 복사 완료! 추가 크기 조절하기 width="30" 추가하기 2023. 4. 5. [HTML/CSS 간단 TIP] 기본으로 띄어지는 body 여백 지우기(코드 적용 사진 있음) body 여백 지우기 CSS 파일에 코드 추가 HTML 파일에 코드 추가 적용 이전 적용 이후 2023. 4. 5. div 박스 가로로 배치하는 간편한 방법 display: flex; [솔직히 float:left; 나 display: inline-block; 보다 좋음] 3개의 div 박스를 만들어줍니다 flex를 적용시킬거니까 3개를 묶는 div태그 class="flex-container" 3개 박스는 class="box"로 했습니다. 근데 div 박스가 확인이 안되니 색과 높이,너비를 넣어보겠습니다. 이제 잘 보입니다! 이제 flexbox를 써 볼까요? 그냥 박스들을 감싸는 부모 요소(class="flex-container") 에게 display : flex를 사용하면 됩니다. 결과는? 가로로 잘 정리되었습니다. flex로 가로정렬한 div box 정렬 위치를 바꾸고싶다면? 어떻게 해야 할까요? justify-content : center; //가운데 정렬 justify-content :flex-end; //오른쪽 정렬 justify-content:flex-s.. 2023. 3. 3. [HTML/CSS 간단 TIP] 가운데 정렬 시키기 css코드 내용을 가운데 정렬하고 싶으신 분들 잘 오셨습니다. 결과부터 말하자면 .class_name{ display:block; margin-left: auto; margin-right: auto; } 가운데 정렬 코드 3개를 css파일에 넣어주거나 style로 추가하시면 됩니다. 상세한 과정을 원하신다면 계속 읽으시면 됩니다 정렬이 잘 되는지 쉽게보기 위해서 이미지를 넣어보겠습니다 Jang go 안녕하세요 냉장고입니다. img 코드를 넣고 class이름은 center로 만들어 보겠습니다. 그냥 사진만 두면 허전하니까 이름을 h3태그로 추가하고, 인사말을 간단하게 넣어보겠습니다. 둘다 class가 필요합니다. 이름의 class를 name으로, 인사말의 class를 hello라고 만들어 보 겠습니다. 일.. 2023. 2. 23. [HTML/CSS 간단 TIP] Visual Studio Code 개발 웹페이지 실시간 확인 웹페이지를 만들면서 바로바로 코드의 결과를 확인하고 싶으신분들!!으 잘 오셨습니다. !! 제가 소개할 프로그램은 Live Server 입니다. 1) 일단 실행시켜 볼만한 파일을 만든 후 2) 화살표가 가르키는 버튼을 선택합니다. 3) Live Server 를 입력한 후 4) 설치를 누릅니다. (제거는 이미 설치완료 되어 있어서 사용 안함으로 뜨는것 이기 때문에 신경 노노) 5) [아까 만든 파일위에서 우클릭 -> Open with Live Server 클릭 ] [Alt + L 또는 Alt + O 누르기] 6) 바로 실행 화면이 나옵니다. Visual Studio Code 에서 실행한 파일의 코드를 변경한 후 저장하면 바로 변경화면으로 나옵니다. 개인적으로 정말 편리합니다 2023. 2. 23. 이전 1 다음 반응형
