고정 헤더 영역
상세 컨텐츠
본문
지난 포스팅에서 언급했던 UXUI 국비지원 후기 1탄에 이어서 2탄으로 마무리할까 한다. 어차피 좋은말은 많이 나오질 않으니 이미 6개월 지난거..... 계속 우려먹어봤자 마음만 속상할 것 같아서 ㅠ.ㅠ..
이번 포스팅도 좀 길어질 것 같아서 Index를 주가해 보았다.
- UXUI국비지원 후기 2탄
- CSS flex item 속성과 레이아웃 예제
2. 대놓고 베껴라고 부추기는 강사
이걸 들으면 무조건 취업이 될 것이라고 생각은 안했지만 생각보다 너무 허술한 커리큘럼과 포트폴리오 사이트 하나 정도는 뚝딱 만들 수 있을 것이란 기대와는 다르게 포폴을 끝까지 완성도 제대로 못한 사람도 부지기수였다. 도대체 직전 기수들은 어떻게 했느냐- 생각이 들었는데 알고보니 직전 기수들은 7명인가 8명밖에 안되었데......
그래. 우리반 20명 중에 7,8명 정도만 포트폴리오를 완성했을 뿐이다. 그것도 웹으로 만든건 5명도 안될듯... 😑
마지막 날에 포트폴리오 발표를 해야 하는데 만든것도 제대로 완성이 안되었고, 제작해야 하는 사이트도 다 되지 않은 사람들이 많아서 발표 내용이 중간발표와 크게 다르지 않았다. 후우... 그리고 마지막 2주기간 동안은 거의 다른 사람 포트폴리오 베끼기를 권장?하는 강사 덕분에 좀 만들었다 싶은 사람들꺼는 소스를 다 달라고 해서 이리저리 돌아다니면서 플러그인으로 갖다 베껴서 만든 사람들도 많았다.
진짜 황당했다. 그래서 나는 내꺼 웹 포트폴리오를 서버에 아예 올리질 않았음. 서로 참고하는거야 그럴수 있다 치는데, 거의 플러그인을 다 베끼고, "이런식으로 해라"라고 보여주면서 말하는게 아니라 그냥 그 파일을 다 주면서 콘텐츠 내용만 바꿔라는 식이였다. 이러면 포트폴리오를 만든 데 무슨 의미가 있지.....?
보통 면접을 가면 포트폴리오를 띄어놓거나 소개하면서 설명하는 식으로 진행이 될텐데, 그런거 생각도 안하고 일단 베껴서 만들 놓고 보자는 식이었다. 강사가 프로그램 정품 안쓰다 랜섬웨어 걸렸다고 하는거 보면 말 다했지뭐... 학원 역시 오피스 프로그램은 정품을 쓰지 않은게 태반이었다.
특히나 강사 수업방식이 마음에 안들어서 맨날 싸우던 한 사람 포트폴리오를 쌤이 거의 다 만들어주는 것을 보면서 정말 현타가 왔다. 별점을 의식한 것인가.....?! 마지막 취업상담이라고 해서 한사람씩 막판에 막 데리고 가던데 들어보면 별점을 잘 달라는 소리만 했다고 하더라. 그것마저 나는 하지 않았다. 뭐지,,,,,,,,,,,,? 결국 거진 6개월 동안 상담은 초반에 한번정도? 한 게 다고... 뭐 그렇다고 해서 나의 포트폴리오를 따로 피드백 해주었거나 케어를 해준 것도 아니라서.
그럼에도 돌아간다면 다시 들을꺼냐고?
아무래도 그래야 겠지. 이력서에 교육을 받았다고 한줄 적는것과 안적는 것은 천지 차이일 수 있으니까. 특히나 나같은 비전공자이거나 전직을 하는 사람들은 아무래도 그렇지 않을까? 물론 이 강의를 다시 듣진 않을 것 같다. 차라리 과정이 같아도 이름이 다른 프론트엔드 반을 듣거나 온라인으로 코딩교육을 해주는 국비강의를 들었을 것 같다. 물론 여기서 좋은 사람들도 만나고 특히나 팀 프로젝트를 해서 결과물이 생각보다 잘나왔기 때문에 그나마 위안을 삼고 있다.
국비지원을 꼭 들어야 하냐. 라고 묻는다면 반반이다. 아예 듣지 말라고 한 것처럼 적어놨긴 하지만 사실 이력서에 교육과정 한 줄 적는 것과 적지 않는 것 차이를 취준생이라면 알테고, 그럼에도 국비지원 중에서도 서울권을 추천하고 싶다. 그래도 서울권은 win7을 쓰진 않으니......... 커리큘럼이 거지 같으면 장비라도 괜찮아야하는데 웹반인데 win7은 좀 너무하지 않았나 싶다. 해상도도 다 깨져서 모니터가 안맞기도 하고. (후우-)
그럼 다시 돌아와서 CSS fiex item과 레이아웃 몇 개를 소개해보겠다. 다시 강조하지만, 이건 국비과정에서 배우지 않은 내용이나 실무에서 많이 쓰는 방식이다.
저번 포스팅에서 CSS flex container를 중심으로 설명해 보았다. 부모값이라고 할 수 있는데, 이번에는 flex container 의 자식요소인 flex item에 대해서 속성을 정리해 본다. 🙄
- flex-basis
- flex-grow
- flex-shrink
- flex(축약형) : grow shrink basis;
flex-basis는 width나 height 등에 사용할 수 있는 각종 단위수가 들어갈 수 있다. 기본값은 auto로 해당 아이템의 width를 사용한다. 만약에 width를 따로 설정하지 않는 경우 content로 지정해주면, 컨텐츠의 크기가 기본값이 된다.
다시 말해서 아이템 width를 따로 정해주지 않는 경우, flex-basis를 contetn로 해준다면 부모 값인 container 너비 값에 맞추어서 아이템 크기가 결정된다고 볼 수 있다. 아래 예시 참고 👇
만약에 item에 너비를 지정해주면 각각 너비를 맞출 수 있다.
다음 flex-grow는 flex-basis 값보다 커질 수 있는 지 결정하는 속성이다. grow 값에는 숫자가 들어가는데 기본값은 0이고 0보다 큰 값이 들어가면 해당 아이템이 유연한 박스로 변해서 원래 크기보다 커지게 된다.
flex-grow에 지정된 숫자의 비율로 나누어서 flex-container 여백 부분을 가진다고 생각하면 된다. 아이템이 만약 3개라면 각각 grow값을 1,2,1로 지정할 경우 1:2:1 값으로 여백을 나누어 가진다는 것이다.
flex-shrink의 경우 반대로 flex-basis의 값보다 작아질 수 있는 지 결정할 수 있다. flex-shrink에도 숫자값이 들어가게 되는데 일단 0모다 큰 수가 들어가게 되면 플렉서블한 박스로 변하고 flex-basis보다 작아진다. 기본값이 1이다. 그래서 잘 설정을 안하기도 하고, 보통 0으로 세팅함. 그렇게 되면 고정폭 컨텐츠를 만들수 있다.
<style>
.container{
display: flex;
height: 150px;
outline: 3px solid #222222;
}
.flexItem{
outline: 3px solid green;
background-color: rgb(218, 106, 233);
flex-basis: 150px;
}
.flexItem1{
flex-grow: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="flexItem flexItem1">
flex item1 Lorem ipsum dolor sit amet consectetur,
adipisicing elit. Deserunt officia asperiores et fugit earum dolore aut, possimus,
minus debitis expedita magni consequuntur! Reprehenderit,
neque illo. Facilis harum dolores velit natus.</div>
<div class="flexItem">flex item2</div>
<div class="flexItem">flex item3</div>
</div>
</body>
</html>
위 처럼 flex-basis 고정값을 주었을 때 item2,3은 150px로 고정이 되지만 컨텐츠 길이가 긴 item1의 경우 여백 만큼 늘어난다. grow 설정을 1로 해주었기 때문! 컨텐츠 길이가 각각 다른 경우 이렇게 설정해 주면 보기 쉽게 만들 수 있다.
마지막으로 이 모든것을 한번에 축약해서 쓸 수 있는 flex.
.flexItem{
flex : 1;
/*flex-grow:1; flex-shrink: 1; flex-basis : 0%*/
}순서는 grow, shrink, basis 순이다. 영역 자체를 원하는 비율로 분할하기 위해서는 flex-basis를 0으로 하면 비율에 따라서 컨텐츠가 늘어나고 줄어들 수 있다.
레이아웃 예제 - 내비게이션 박스 만들기
내비게이션은 웹페이지에서 자주 만드는데, 내비게이션 영역을 오른쪽에 붙이는 부분과 메뉴부분은 왼쪽에 보통 붙이는 것이 일반적이다.
<style>
.container{
display: flex;
height: 50px;
outline: 3px solid #222222;
}
.flexItem{
margin-left: 1rem;
outline: 3px solid green;
background-color: rgb(218, 106, 233);
flex:none;
}
.flexItem3{
margin-left:auto;
}
</style>
</head>
<body>
<div class="container">
<div class="flexItem">
logo</div>
<div class="flexItem">headerheaderheaderheader</div>
<div class="flexItem flexItem3">menu</div>
<!-- <div class="flexitem">flex item2</div>
<div class="flexitem">flex item3</div> -->
</div>
</body>
</html>여기서 item을 flex : none으로 설정해 주었다. flex: none은 flex : 0 0 auto를 축약한 속성이다. grow가 0이고 shrink가 0, basis는 auto로 설정해주어서 item크기를 고정하고 container가 작아지면 item도 같이 작아지게 만드는 속성이다. 또 컨텐츠가 부모박스 바깥으로 삐져나오지 않도록 크기를 고정해준다.
fiex item에 margin 중 auto값을 이용하면 오른쪽에 치우치거나, 가운데 또는 왼쪽에 치우친 정렬을 할 수 있다.
정리하면서 쓴다고 썼는데 왠지 글이 길어졌다...! 레이아웃 예제는 이따금씩 정리해서 올려야 겠다. 배워도 배워도 새로운게 너무 많고 헷갈린다 ㅠ.ㅠ....
'공부는끝이없다 > HTML5&CSS' 카테고리의 다른 글
| UXUI 국비지원 후기, CSS Flex와 Grid 그리고 float:left (11) | 2020.11.10 |
|---|---|
| 미디어쿼리로 반응형 웹페이지 레이아웃 변경하기 (0) | 2020.08.26 |
| [html/CSS] 웹페이지 드롭다운 메뉴 만들기 <li>,<ol>,<ul> (0) | 2020.08.19 |
| [HTML/CSS활용] 웹용 이력서 폼을 만들자 (sample)2탄- 끗 (0) | 2020.08.11 |
| [HTML /CSS활용]웹 용 이력서 폼을 만들자 (sample) 1탄 (0) | 2020.08.07 |
댓글 영역