1.비전공에서 취업까지!![HTML,CSS] (27) 썸네일형 리스트형 비전공에서 취업까지!! [27화] css 실기2편 40% 필기40% 태도점수20%!! -입니다.- 안녕하세용 SsunDev에옹! 오랜만이죠? 맞아요 제가 드디어 생에 첫 코로나에 걸려보았지 뭐에요? 그래서 잠깐 쉬었습니다 ㅎㅎ 왜! 모 ! 쉴 수도 itzy! 모! 겸사겸사 할게 좀 많아져서 잠시 쉬었습니다! SsunDev가 보고싶었다면 쏴리 질러!!! 자 그래서 이번시간엔 드디어 그동안 저희가 배웠던 HTML + CSS 을 통하여 그럴싸한 홈페이지를 하나 같이 만들어보겠습니다! 후 정말 길어질것만 같군요! 자 우선 homePage.html, homePage.css 두 페이지를 만들고 각각 안에 뼈대를 기입해 주도록 합시다! 이번에 저희가 만들어볼 페이지는 이런 페이지입니다! 뭔가 2000년대 홈페이지같죠? 네 이런 페이지를 만들고 예쁘게 꾸미는게 프론트 개발자의 할 일입니다! 백앤드는 꾸밀줄 몰라!!.. 비전공에서 취업까지!! [26화] float 의 문제점 -입니다.- Hi im SsunDev im a boy you are a girl nice to meet you zito 후 유식해보이려고 영어를 써 보았습니다. 영어를 원어민급으로 잘하고싶은 썬데브입니다. 저번에 배웠던 float 의 문제점에 대해서 알아보고자 합니다. 앞서 소오올직히 float는 요즘엔 잘 사용하지 않는 기술이기도 해서 알아만 둡시다람쥐 css13.html, css13.css로 html, css를 요로코롬 만들어봅시다 내용물은 이제 다 아실거라고 믿습니다. 대충 float: left 박스 두개 예쁘게 정사각형으로 만들고 색칠도해주고 선도 만들어주고 두 float박스를 담는 배경도 하나 장만해주고 아실거라 믿습니두! 그럼 바로 alt + b!! 자 잘 만들어진거 같긴 한데 뭔가 이상합니다 각 상자가 .. 비전공에서 취업까지!! [25화] float 그것은 바로 물아일체!!! -입니다.- 안녕쌉사리와용? SsunDev 입니다리와리가리 정말 바쁘게 살다보니 평일에 글을 쓸 시간이 없군요... 참 인생이라는게 어렵습니다 ㅋㅋ 오늘 배워볼건 float 라는 기능입니다! 정말 설명하기 애매... 하고 뭐 않이궅이 말해보자면 옜날에 유행했던 기능(?) 이라서 잘 안쓰기도 하지만 그래도 알아야 하기때문에 배워야하긴 하고... 흠... 그렇다면 Go! float 말 그대로 떠있다, 떠다니다 라는 뜻인데 이게 float입니다. 끝! .. 자 농담이고 일단 빠르게 css12.html, css12.css 만들어주시구요! 향상된뼈대랑 @charset 아시죠? 자 그다음에 테그 안에 하나 넣고 그 안에 와 테그를 넣어보도록 하겠습니다. 조금 복잡하죠? 다시 천천히! 테그안에 이건 보통 홈 페이지들을 만들때 전.. 비전공에서 취업까지!! [24화] 마진과 패딩입니다 -입니다.- 안녕들 하신거 다 알고있습니다. SsunDev입니다 패딩을 입기엔 더운날씨가 되었습니다. 전 추위는 정말 안타는데 더위를 사정없이 타서 1년중 7개월은 겨울이고 봄가을 2개월 여름 1개월이었으면 참 좋겠다 라는 생각을 갖고있습니다. 네 잡소리가 길었구요 오늘 배워볼건 마진과 패딩이라는겁니다. 저번에 배운 유용한 꿀팁 중에서 이런 그림 기억 하시련지 모르겠습니다. 자 설명 들어갑니다있! 자 일단 css11로 html, css 를 만들고 시작합시다! 알죠? 그리고 테그 두개도 만들어볼까요? 그다음 css11.css에서 span 이라는 테그 자체에 이런 효과를 설정해주겠습니다. span 은 기본적으로 inline 테그입니다. 지난시간에 inline테그와 block테그에 대해서 알아보았는데요 인라인은 기본적으로.. 비전공에서 취업까지!! [23화] 앞으로 개발에 사용될 유용한 기술 몇가지! -입니다.- 안녕들 하실거라 믿습니다 SsunDev 입니다. 긴 겨울이 지나고 푸근한 봄이 왔습니디. 날씨가 너무좋아 동네를 한시간쯤 걸으니 머리속이 미세먼지로 서걱서걱합니다. 하 전 여름이 싫은데 벌써 심상정않은 여름이 올것만 같습니다... 유시민지켜보니 언제부턴가 날씨가 보ㅁ... 여름여름여름여름여름 가ㅇ.. 겨울겨울겨울겨울겨울 밖에 없는것 같습니다. 이 조금있는 봄을 느끼러 혼자 여행이나 가봐야겠습니다. 서론이 길었습니다 슬슬 css도 끝이 보이기는 하는것 같습니다! 가 봅시다!! 이에 앞서 오늘은 앞으로 자주 쓸 기술(?)을 알려드리려고 합니다 네이버를 켜시고! 이 상태에서 F12를 눌러봅시다! 이런 특이한 창이 하단 혹은 우측에 생성된것을 보실 수 있습니다. 구글 크롬뿐만아니라 엣지 파이어폭스 등등 다양한 .. 비전공에서 취업까지!! [22화] CSS 빽그라운드를 꾸며보자!! -입니다.- 안녕하세요? SsunDev입니다. 복싱을 너무 열심히했더니 요즘 주먹과 오른다리가 너무 아픕니다. 하지만 이 직장에서 받은, 삶에서 받은, 들이받은 스트레스를 풀기엔 이만한게 없군요 개발자여러분 꼭 운동하세요 콤피타만 보고있으면 허리 나빠지고 눈도 나빠지고 여자친구도 안생깁니다. 아 물론 .. 아 아닙니다.. 자 각설하고 오늘 배울것은 Background 입니다!!! 다 알잖아요? 그쵸? 막 그 html뼈대 막!! css 막!! ㅎㅎ 그리고 id="wrap" 이라고 백그라운드 하나 만들어보도록 하겠습니다! 그 다음 css로 가서! 자 첫번째 줄의 margin: auto;는 나~중 설명해드리고 일단 따라만 치세요 따라만 치세요! 그다음 width:1280px; height:1000px; background.. 비전공에서 취업까지!! [21화] CSS 그동안 배운것을 활용편!! 그럴싸한 게시판을 만들어보자! -입니다.- 안녕하세요 SsunDev입니다 예의라면 제가 꽉 잡고 있숨다! 모자를 받아드릴 끄아요? 게시판을 만들어드릴 끄아아요? 오늘은 저와 함께 드디어 그럴싸한 페이지를 한번 만들어 보겠습니다. 기나긴 싸움이 될것만 같군요... 오늘 만들어볼 페이지는 이런식으로 게시판 페이지를 만들어 보려고 합니다. 마우스를 올리면 해당 게시글 목록이 노랗게 바뀌는 기능도 넣구요! 어떻게 만들지 살짝 감이 잡히시나요? 한번 시작해 보도록 하겠습니다. html과 css 파일 만들고 내용물 채워주시고 시작해 보도록 하겠습니다. 페이지를 만드실 때 보통은 이렇게 페이지의 전체를 감싸는 div를 하나 두고 시작합니다. 이를통해 해당 홈페이지의 width 나 정렬을 명시해 줄 수 있기 때문입니다. wrap 이나 컨테이너등등 추후에 알아보.. 비전공에서 취업까지!! [20화] CSS 가상클래스 -입니다.- 안녕? 난 SsunDev! 반갑습니다 썬데브입니다 오늘은 가상 클래스 라는걸 배워보겠습니다. 앞으로 클래스라는말을 주구장창 들으실텐데 이 가상클래스는 뭐 그런 클래스같은 느낌은 아닌거같고 그냥.. 이런이름이 있네 정도만 알아두셔도 될거 같긴합니다. (Pseudo)라고 불리는 이 가상클래스는 여러가지가 있는데 저어엉말 대표적으로 :hover :active :link :visited 가 있습니다. 어렵게 생각할건 없고 우리가 배웠던 선택자에 저 옵션들을 붙인다고 생각하면 됩니다. 백문이불여일견 자 드가봅시다!!! 자 09번으로 만드시고 뭐 뼈대 머시기 저시기 하시고 css 막 하고 막 으이? 다 알제? 알제리? 그리고 div두개 만들고 a 두개 만들고 id도 만들어줘봅시다! 그다음 css09.css페이지로 .. 이전 1 2 3 4 다음
