본문 바로가기

웹개발

 (26)
[웹개발 프로젝트] 1. 프론트엔드 디자인 이번 주제는 대전 맛집 추천 웹사이트에 대한 제작 과정이다. 1. 프론트엔드 템플릿 탐색 아래 사이트에 방문하여 마음에 드는 웹사이트 디자인의 템플릿을 다운로드한다. https://www.free-css.com/free-css-templates Foodhut Free Website Template | Free CSS Templates | Free CSS www.free-css.com 선택한 디자인 ( 테마 : 음식 ) 2. 로고 디자인 로고가 마음에 들어서 안에 text만 프로젝트 주제와 맞게 변경하였다. 설명 step 1. ctrl + shift + c 키를 눌러 로고에 마우스를 올리면 html코드가 어디있는지 알 수 있고 개발자도구( F12 )를 통해 텍스트를 변경하면서 적용해본다. step 2. h..
[git & github 기초] 5. 브런치, 커밋 삭제 1. 커밋을 삭제하는 방법 삭제할 브런치 생성 파일생성 ( 상황을 위해 세팅하는 과정 ) staging area에 file1.txt 파일 추가 삭제하는 과정 파악하기 위해 임의로 여러 커밋들을 등록 세번쨰 커밋 파일 2개 추가 세팅 완료! log 확인 앞서 만든 파일들은 모두 커밋했으므로 추적이 가능! # 삭제하는 방법은? 첫번째 방법 : 파일 직접 삭제 직접삭제 => 스테이징 영역으로 이동 => 취소상태로 변경 두번쨰 방법 : 명령어입력 git rm file2.txt 근데 삭제가 되지 않았다! 이유는 현재 위치가 git-basics이므로 찾지 못함! 경로를 잘 알려줘야함 위치 이동후 명령어 실행 차이점이 있다! 첫번째 방식으로 진행할 경우 스테이징 영역에 수정사항을 추가해야한다. (빨간색은 삭제된 상태..
호스팅 & 배포 개념, 실습, favicon, 경로 용어를 정리하기 앞서 프론트엔드가 진행되는 과정을 알아야한다. step 1. 사용자가 주소창에 주소를 입력한다. step 2. 브라우저가 해당 주소에 연결된 정보를 통해 서버에 요청을 날린다. step 3. 서버는 브라우저의 요청에 응답한다. ( 배포된 html, css 코드를 전달 - 호스팅 ) step 4. 브라우저가 서버로부터 전달받은 코드를 실행한다. step 5. 웹페이지에 표시된다. 1. Deploying ( 배포 ) 란? html, css, javascript로 작성된 code를 서버에 옮기는 행위를 뜻한다. 2. hosting ? 서버에 저장된 코드를 사용자(브라우저)에게 제공하는 것을 의미 3. 실습생략 # nettify 보고 배포하고 도메인 만들기 가능 # 기본적으로 nettify에서 ..
[html, css 응용] 8. 여러가지 html요소 여러가지 html 요소 : emphasize의 약자로 강조하고 싶은 텍스트를 삽입하면 텍스트 음성을 읽을 때 강조 + 텍스트로 bold처리가 자동으로 된다. 강조처리를 하고싶을 때 으로 bold 주는 것 보다 더 권장된다. : 과 비슷하지만 억양이 약간 다르다. : 문장 구분을 용이하게함 예시코드) 다음과 같은 코드를 보자. HTML & CSS Basics Summary HTML Summary HTML(HyperText Markup Language) is used to define our page content, structure and meaning. You don't use it for styling purposes. Use CSS for that instead! HTML uses"elements"t..
[html, css 응용] 7. box-shadow 오늘 강의에서는 box-shadow 속성에 대해 알아보자! box-shadow는 말 그대로 박스그림자라는 의미이다. css 박스에 그림자를 값으로 설정하므로써 입체감과 웹사이트의 퀄리티를 높일 수 있다. 소스코드 li{ background-color: rgb(223, 136, 124); border-radius: 4px; margin: 32px; padding: 16px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); } # 위에 코드를 설명하자면 그림자에 대해 크기를 오른쪽으로 1px 아래쪽으로 1px 흐림정도를 4px 로 설정하고 rgba를 통해 그림자의 색상과 투명도를 설정한다. # rgba 는 rgb + 투명도이다. 실행결과 before after 입체감 뿜뿜.
[html, css 응용] 6. 마진 상쇄 이번 강의에서는 마진 상쇄에 대해 알아보자! 개발자도구를 보면 il에 margin을 30px로 설정했는데 요소들끼리 서로 마진이 겹쳐 60px가 아닌 30px로 나타나고 있다. 이를 마진상쇄라고 하며 마진상쇄가 일어나는 조건을 아래에 정리해 보겠다. 마진 상쇄 특징 1. block element와 block element 사이에서만 발생된다. 2. 인접 요소의 수직 마진에 대해서만 발생된다. 3. 수평, inline to block, inline to inline에서는 발생하지 않는다. 4. 인접한 두 요소의 마진이 서로 다를 때 마진 상쇄가 발생된다면 항상 큰 쪽이 우세하다. 5. display에서 inline-block은 마진 상쇄가 일어나지 않는다. 예시 1~5 모두 속성을 바꾸며 실습해보니 확인할..
[html, css 응용] 5. css - block, inline 이번 강의에서는 block element, inline element를 배워보자. html 요소중에는 크게 block 요소와 inline 요소가 있다. block 요소에는 p, h1 등이 있고 inline 요소에는 img, a 등이 있다. block요소는 특징은 full line, new line 이고 inline요소는 둘 다 해당되지 않는다. full line 이란 하나의 요소가 한 줄을 모두 사용하는 것을 뜻하고 new line은 여러 block요소들이 있으면 그만큼의 new line을 요구하는 것을 뜻한다. 예시) p가 차지하는 영역 vs a가 차지하는 영역 ( 파란 박스 ) inline의 주요 특징 1. top, bottom에 margin 속성이 적용되지 않는다. 2. padding을 적용하였을 ..
[html, css 응용] 4. css 선택자, 결합자 오늘은 선택자와 결합자에 대해 알아보았다. 둘 다 여러 요소를 선택할 때 사용하는 것으로 선택자는 앞에서 id와 #를 이용하는 방법으로 배웠다. 이번에는 class, 결합자 등을 통해 여러 요소에 css 규칙을 적용시키는 방법을 실습해보자. 1. 선택자 실습 : class를 이용하여 4개의 li중에 가운데 2개만 색상을 다르게 해보자. Tueday, January 2nd I'll Finish Section 3 Wednesday, January 3rd I'll Go To Seoul With Gy Girlfriend Thursday, January 4th Dive Deeper into HTML & CSS And Build More Complex WebSites Friday, January 5th Practi..

티스토리툴바