무라언니

누구나 쉽고 간편하게 따라할 수 있는 집밥레시피를 연구하고 있습니다 요리초보자도 한 끼 거뜬하게 만들어 먹을 수 있는 노하우 모두 가져가세요

코딩IT리뷰

부트스트랩(Bootstrap) 설치하고 사용하는 방법 안녕하세요아이언스카이입니다 오늘은 부트스트랩에 대하여 알아보고 설치, 사용하는 방법에 대해 알아볼게요 부트스트랩은 이미 만들어진 다양한 화면을html 코드 복붙만 해서 홈페이지 화면이 완성되게끔 만들어진 프로그램인데요 물론 중간중간 css 가 필요한 부분도 있지만디자인에 자신없는 프론트엔드개발자들에게는 유용한 프로그램이랍니다게다가 모두 한글로 번역되어 있어서 우리가 가져다 쓰기도 쉽구요 그럼 지금부터 설치하는 것부터 알아 보겠습니다부트스트랩을 사용하기 위해서는 html 화면에 추가해 주어야 하는코드들이 있기 때문입니다~>_ 03. 부트스트랩 필요한 파일 내 폴더에 붙여넣기 그럼 지금부터는 붙여넣은 코드와 이름이 같은 파일을제가 진행할 폴더 안에 똑같이..

코딩IT리뷰

html/css 크기가 다른 사진 일정하게 배치하는 방법 안녕하세요아이언스카이입니다 홈페이지 등을 만들 때 크기가 모두 다른 사진들을한 공간에 배치해야 하는 경우가 있는데요 사진크기가 다른 경우 html/css 를 이용하여일정한 크기와 간격으로 배치하는 방법을 알아 보겠습니다위 사진처럼 음식주제로 사진들을 배치해 본다고 가정할게요 위 사진들은 구글 이미지에서 가져온 이미지들이구요모두 크기가 다릅니다 아래 두 개의 사진이 원본 크기인데요 딸기파이와 핫케익의 크기가 많이 차이나지 않나요? 하지만 최종적으로 만든 화면을 보시면사진크기의 차이를 모르실 거예요 똑같은 공간에 똑같은 크기로 들어가 있거든요실제 크기가 다른 사진들을css 코드들을 이용하여똑같은 크기로 넣은 모습입니다 파란색 네모친 부분이 위에서 보여..

코딩IT리뷰

홈페이지메뉴 상단에 고정하는방법 안녕하세요 아이언스카이입니다 오늘은 홈페이지 만들면서 위의 메뉴가계속 고정되어 있게 하려면 어떻게 하는지를 포스팅할 텐데요 위 사진은 이전에 제가홈페이지 메뉴 만드는 방법에서 사용했던 사진인데요홈페이지 돌아다니다 보면제가 노란박스로 된 메뉴 부분이스크롤을 내려도 계속 상단에 떠 있는 것을 볼 수 있습니다 이 부분도 css style 부분에서 속성을 바꿔준 것 뿐이랍니다 우선 제 html 코드부터 보여드릴게요 로고부분부터 리스트로 만든 메뉴를 통틀어 로 감싸 주었구요그 를 라는 태그 안에 넣었습니다 일전에도 말씀드렸다시피 태그는크롬에서는 잘 적용이 되지만만약 익스플로러로 html 을 실행시킨다면버전에 따라 안 되는 경우가 있으니 반드시 w3schools 에서태그 버전을 확인..

코딩IT리뷰

html/css float 이용하여 홈페이지 메뉴 배치하기 안녕하세요아이언스카이입니다 오늘은 홈페이지 만들 때 위 상단의 메뉴 배치하는 법을포스팅 해볼게요!!!!! 제가 하는 방법이 100% 정답은 아니고홈페이지는 결과물만 잘 나오면 되니 다르더라도 참고해 주세요 오늘의 샘플 홈페이지 메인사진입니다우리가 봐야할 곳은 로고와 메뉴들이 있는 윗부분이에요 그래서 아래 본문 사진은 지우고위 메뉴만 남기게 해서 보겠습니다 01. html 코드 작성하기 저는 로고 부분을 h1으로 작성하여 제일 크고,두꺼운 글자로 만들어 주었구요 나머지 메뉴들은 ul과 li를 써서 리스트 안에넣어 주었습니다 보시는 바와 같이 , 라고 되어 있는 것은html 표준법에 의거하여 최대한 표준표기법을 따르려고 작성한 것인데요 특별한 의미라..